diff --git a/lib/selectors/thread-selectors.js b/lib/selectors/thread-selectors.js
index db8db68fa..79531e0bd 100644
--- a/lib/selectors/thread-selectors.js
+++ b/lib/selectors/thread-selectors.js
@@ -1,535 +1,530 @@
 // @flow
 
 import _compact from 'lodash/fp/compact.js';
 import _filter from 'lodash/fp/filter.js';
 import _flow from 'lodash/fp/flow.js';
 import _map from 'lodash/fp/map.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _orderBy from 'lodash/fp/orderBy.js';
 import _some from 'lodash/fp/some.js';
 import _sortBy from 'lodash/fp/sortBy.js';
 import _memoize from 'lodash/memoize.js';
 import { createSelector } from 'reselect';
 import { createObjectSelector } from 'reselect-map';
 
 import {
   filteredThreadIDsSelector,
   includeDeletedSelector,
 } from './calendar-filter-selectors.js';
 import { relativeMemberInfoSelectorForMembersOfThread } from './user-selectors.js';
 import genesis from '../facts/genesis.js';
 import {
   getAvatarForThread,
   getRandomDefaultEmojiAvatar,
 } from '../shared/avatar-utils.js';
 import { createEntryInfo } from '../shared/entry-utils.js';
 import { getMostRecentNonLocalMessageID } from '../shared/message-utils.js';
 import {
   threadInHomeChatList,
   threadInBackgroundChatList,
   threadInFilterList,
   threadInfoFromRawThreadInfo,
   threadHasPermission,
   threadInChatList,
   threadHasAdminRole,
   roleIsAdminRole,
   threadIsPending,
   getPendingThreadID,
 } from '../shared/thread-utils.js';
 import type { ClientAvatar, ClientEmojiAvatar } from '../types/avatar-types';
 import type { EntryInfo } from '../types/entry-types.js';
 import type { MessageStore, RawMessageInfo } from '../types/message-types.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from '../types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 import type { BaseAppState } from '../types/redux-types.js';
 import { threadPermissions } from '../types/thread-permission-types.js';
 import {
   threadTypes,
   threadTypeIsCommunityRoot,
   type ThreadType,
 } from '../types/thread-types-enum.js';
 import {
   type ThreadInfo,
   type RawThreadInfo,
-  type LegacyRelativeMemberInfo,
   type SidebarInfo,
   type RawThreadInfos,
+  type RelativeMemberInfo,
 } from '../types/thread-types.js';
 import { dateString, dateFromString } from '../utils/date-utils.js';
 import { values } from '../utils/objects.js';
 
 const _mapValuesWithKeys = _mapValues.convert({ cap: false });
 
 type ThreadInfoSelectorType = (state: BaseAppState<>) => {
   +[id: string]: ThreadInfo,
 };
 const threadInfoSelector: ThreadInfoSelectorType = createObjectSelector(
   (state: BaseAppState<>) => state.threadStore.threadInfos,
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo.id,
   (state: BaseAppState<>) => state.userStore.userInfos,
   threadInfoFromRawThreadInfo,
 );
 
 const communityThreadSelector: (
   state: BaseAppState<>,
 ) => $ReadOnlyArray<ThreadInfo> = createSelector(
   threadInfoSelector,
   (threadInfos: { +[id: string]: ThreadInfo }) => {
     const result = [];
     for (const threadID in threadInfos) {
       const threadInfo = threadInfos[threadID];
       if (!threadTypeIsCommunityRoot(threadInfo.type)) {
         continue;
       }
       result.push(threadInfo);
     }
     return result;
   },
 );
 
 const canBeOnScreenThreadInfos: (
   state: BaseAppState<>,
 ) => $ReadOnlyArray<ThreadInfo> = createSelector(
   threadInfoSelector,
   (threadInfos: { +[id: string]: ThreadInfo }) => {
     const result = [];
     for (const threadID in threadInfos) {
       const threadInfo = threadInfos[threadID];
       if (!threadInFilterList(threadInfo)) {
         continue;
       }
       result.push(threadInfo);
     }
     return result;
   },
 );
 
 const onScreenThreadInfos: (
   state: BaseAppState<>,
 ) => $ReadOnlyArray<ThreadInfo> = createSelector(
   filteredThreadIDsSelector,
   canBeOnScreenThreadInfos,
   (
     inputThreadIDs: ?$ReadOnlySet<string>,
     threadInfos: $ReadOnlyArray<ThreadInfo>,
   ): $ReadOnlyArray<ThreadInfo> => {
     const threadIDs = inputThreadIDs;
     if (!threadIDs) {
       return threadInfos;
     }
     return threadInfos.filter(threadInfo => threadIDs.has(threadInfo.id));
   },
 );
 
 const onScreenEntryEditableThreadInfos: (
   state: BaseAppState<>,
 ) => $ReadOnlyArray<ThreadInfo> = createSelector(
   onScreenThreadInfos,
   (threadInfos: $ReadOnlyArray<ThreadInfo>): $ReadOnlyArray<ThreadInfo> =>
     threadInfos.filter(threadInfo =>
       threadHasPermission(threadInfo, threadPermissions.EDIT_ENTRIES),
     ),
 );
 
 const entryInfoSelector: (state: BaseAppState<>) => {
   +[id: string]: EntryInfo,
 } = createObjectSelector(
   (state: BaseAppState<>) => state.entryStore.entryInfos,
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo.id,
   (state: BaseAppState<>) => state.userStore.userInfos,
   createEntryInfo,
 );
 
 // "current" means within startDate/endDate range, not deleted, and in
 // onScreenThreadInfos
 const currentDaysToEntries: (state: BaseAppState<>) => {
   +[dayString: string]: EntryInfo[],
 } = createSelector(
   entryInfoSelector,
   (state: BaseAppState<>) => state.entryStore.daysToEntries,
   (state: BaseAppState<>) => state.navInfo.startDate,
   (state: BaseAppState<>) => state.navInfo.endDate,
   onScreenThreadInfos,
   includeDeletedSelector,
   (
     entryInfos: { +[id: string]: EntryInfo },
     daysToEntries: { +[day: string]: string[] },
     startDateString: string,
     endDateString: string,
     onScreen: $ReadOnlyArray<ThreadInfo>,
     includeDeleted: boolean,
   ) => {
     const allDaysWithinRange: { [string]: string[] } = {},
       startDate = dateFromString(startDateString),
       endDate = dateFromString(endDateString);
     for (
       const curDate = startDate;
       curDate <= endDate;
       curDate.setDate(curDate.getDate() + 1)
     ) {
       allDaysWithinRange[dateString(curDate)] = [];
     }
     return _mapValuesWithKeys((_: string[], dayString: string) =>
       _flow(
         _map((entryID: string) => entryInfos[entryID]),
         _compact,
         _filter(
           (entryInfo: EntryInfo) =>
             (includeDeleted || !entryInfo.deleted) &&
             _some(['id', entryInfo.threadID])(onScreen),
         ),
         _sortBy('creationTime'),
       )(daysToEntries[dayString] ? daysToEntries[dayString] : []),
     )(allDaysWithinRange);
   },
 );
 
 const childThreadInfos: (state: BaseAppState<>) => {
   +[id: string]: $ReadOnlyArray<ThreadInfo>,
 } = createSelector(
   threadInfoSelector,
   (threadInfos: { +[id: string]: ThreadInfo }) => {
     const result: { [string]: ThreadInfo[] } = {};
     for (const id in threadInfos) {
       const threadInfo = threadInfos[id];
       const parentThreadID = threadInfo.parentThreadID;
       if (parentThreadID === null || parentThreadID === undefined) {
         continue;
       }
       if (result[parentThreadID] === undefined) {
         result[parentThreadID] = ([]: ThreadInfo[]);
       }
       result[parentThreadID].push(threadInfo);
     }
     return result;
   },
 );
 
 const containedThreadInfos: (state: BaseAppState<>) => {
   +[id: string]: $ReadOnlyArray<ThreadInfo>,
 } = createSelector(
   threadInfoSelector,
   (threadInfos: { +[id: string]: ThreadInfo }) => {
     const result: { [string]: ThreadInfo[] } = {};
     for (const id in threadInfos) {
       const threadInfo = threadInfos[id];
       const { containingThreadID } = threadInfo;
       if (containingThreadID === null || containingThreadID === undefined) {
         continue;
       }
       if (result[containingThreadID] === undefined) {
         result[containingThreadID] = ([]: ThreadInfo[]);
       }
       result[containingThreadID].push(threadInfo);
     }
     return result;
   },
 );
 
 function getMostRecentRawMessageInfo(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   messageStore: MessageStore,
 ): ?RawMessageInfo {
   const thread = messageStore.threads[threadInfo.id];
   if (!thread) {
     return null;
   }
   for (const messageID of thread.messageIDs) {
     return messageStore.messages[messageID];
   }
   return null;
 }
 
 const sidebarInfoSelector: (state: BaseAppState<>) => {
   +[id: string]: $ReadOnlyArray<SidebarInfo>,
 } = createObjectSelector(
   childThreadInfos,
   (state: BaseAppState<>) => state.messageStore,
   (childThreads: $ReadOnlyArray<ThreadInfo>, messageStore: MessageStore) => {
     const sidebarInfos = [];
     for (const childThreadInfo of childThreads) {
       if (
         !threadInChatList(childThreadInfo) ||
         childThreadInfo.type !== threadTypes.SIDEBAR
       ) {
         continue;
       }
       const mostRecentRawMessageInfo = getMostRecentRawMessageInfo(
         childThreadInfo,
         messageStore,
       );
       const lastUpdatedTime =
         mostRecentRawMessageInfo?.time ?? childThreadInfo.creationTime;
       const mostRecentNonLocalMessage = getMostRecentNonLocalMessageID(
         childThreadInfo.id,
         messageStore,
       );
       sidebarInfos.push({
         threadInfo: childThreadInfo,
         lastUpdatedTime,
         mostRecentNonLocalMessage,
       });
     }
     return _orderBy('lastUpdatedTime')('desc')(sidebarInfos);
   },
 );
 
 const unreadCount: (state: BaseAppState<>) => number = createSelector(
   (state: BaseAppState<>) => state.threadStore.threadInfos,
   (threadInfos: RawThreadInfos): number =>
     values(threadInfos).filter(
       threadInfo =>
         threadInHomeChatList(threadInfo) && threadInfo.currentUser.unread,
     ).length,
 );
 
 const unreadBackgroundCount: (state: BaseAppState<>) => number = createSelector(
   (state: BaseAppState<>) => state.threadStore.threadInfos,
   (threadInfos: RawThreadInfos): number =>
     values(threadInfos).filter(
       threadInfo =>
         threadInBackgroundChatList(threadInfo) && threadInfo.currentUser.unread,
     ).length,
 );
 
 const baseAncestorThreadInfos: (
   threadID: string,
 ) => (BaseAppState<>) => $ReadOnlyArray<ThreadInfo> = (threadID: string) =>
   createSelector(
     (state: BaseAppState<>) => threadInfoSelector(state),
     (threadInfos: {
       +[id: string]: ThreadInfo,
     }): $ReadOnlyArray<ThreadInfo> => {
       const pathComponents: ThreadInfo[] = [];
       let node: ?ThreadInfo = threadInfos[threadID];
       while (node) {
         pathComponents.push(node);
         node = node.parentThreadID ? threadInfos[node.parentThreadID] : null;
       }
       pathComponents.reverse();
       return pathComponents;
     },
   );
 
 const ancestorThreadInfos: (
   threadID: string,
 ) => (state: BaseAppState<>) => $ReadOnlyArray<ThreadInfo> = _memoize(
   baseAncestorThreadInfos,
 );
 
 const baseOtherUsersButNoOtherAdmins: (
   threadID: string,
 ) => (BaseAppState<>) => boolean = (threadID: string) =>
   createSelector(
     (state: BaseAppState<>) => state.threadStore.threadInfos[threadID],
     relativeMemberInfoSelectorForMembersOfThread(threadID),
     (
       threadInfo: ?RawThreadInfo,
-      members: $ReadOnlyArray<
-        LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-      >,
+      members: $ReadOnlyArray<RelativeMemberInfo>,
     ): boolean => {
       if (!threadInfo) {
         return false;
       }
       if (!threadHasAdminRole(threadInfo)) {
         return false;
       }
       let otherUsersExist = false;
       let otherAdminsExist = false;
       for (const member of members) {
         const role = member.role;
         if (role === undefined || role === null || member.isViewer) {
           continue;
         }
         otherUsersExist = true;
         if (roleIsAdminRole(threadInfo?.roles[role])) {
           otherAdminsExist = true;
           break;
         }
       }
       return otherUsersExist && !otherAdminsExist;
     },
   );
 
 const otherUsersButNoOtherAdmins: (
   threadID: string,
 ) => (state: BaseAppState<>) => boolean = _memoize(
   baseOtherUsersButNoOtherAdmins,
 );
 
 function mostRecentlyReadThread(
   messageStore: MessageStore,
   threadInfos: RawThreadInfos,
 ): ?string {
   let mostRecent = null;
   for (const threadID in threadInfos) {
     const threadInfo = threadInfos[threadID];
     if (threadInfo.currentUser.unread) {
       continue;
     }
     const threadMessageInfo = messageStore.threads[threadID];
     if (!threadMessageInfo) {
       continue;
     }
     const mostRecentMessageTime =
       threadMessageInfo.messageIDs.length === 0
         ? threadInfo.creationTime
         : messageStore.messages[threadMessageInfo.messageIDs[0]].time;
     if (mostRecent && mostRecent.time >= mostRecentMessageTime) {
       continue;
     }
 
     const topLevelThreadID =
       threadInfo.type === threadTypes.SIDEBAR
         ? threadInfo.parentThreadID
         : threadID;
     mostRecent = { threadID: topLevelThreadID, time: mostRecentMessageTime };
   }
   return mostRecent ? mostRecent.threadID : null;
 }
 
 const mostRecentlyReadThreadSelector: (state: BaseAppState<>) => ?string =
   createSelector(
     (state: BaseAppState<>) => state.messageStore,
     (state: BaseAppState<>) => state.threadStore.threadInfos,
     mostRecentlyReadThread,
   );
 
 const threadInfoFromSourceMessageIDSelector: (state: BaseAppState<>) => {
   +[id: string]: ThreadInfo,
 } = createSelector(
   (state: BaseAppState<>) => state.threadStore.threadInfos,
   threadInfoSelector,
   (
     rawThreadInfos: RawThreadInfos,
     threadInfos: { +[id: string]: ThreadInfo },
   ) => {
     const pendingToRealizedThreadIDs =
       pendingToRealizedThreadIDsSelector(rawThreadInfos);
     const result: { [string]: ThreadInfo } = {};
     for (const realizedID of pendingToRealizedThreadIDs.values()) {
       const threadInfo = threadInfos[realizedID];
       if (threadInfo && threadInfo.sourceMessageID) {
         result[threadInfo.sourceMessageID] = threadInfo;
       }
     }
     return result;
   },
 );
 const pendingToRealizedThreadIDsSelector: (
   rawThreadInfos: RawThreadInfos,
 ) => $ReadOnlyMap<string, string> = createSelector(
   (rawThreadInfos: RawThreadInfos) => rawThreadInfos,
   (rawThreadInfos: RawThreadInfos) => {
     const result = new Map<string, string>();
     for (const threadID in rawThreadInfos) {
       const rawThreadInfo = rawThreadInfos[threadID];
       if (
         threadIsPending(threadID) ||
         (rawThreadInfo.parentThreadID !== genesis.id &&
           rawThreadInfo.type !== threadTypes.SIDEBAR)
       ) {
         continue;
       }
       const actualMemberIDs = rawThreadInfo.members
         .filter(member => member.role)
         .map(member => member.id);
       const pendingThreadID = getPendingThreadID(
         rawThreadInfo.type,
         actualMemberIDs,
         rawThreadInfo.sourceMessageID,
       );
       const existingResult = result.get(pendingThreadID);
       if (
         !existingResult ||
         rawThreadInfos[existingResult].creationTime > rawThreadInfo.creationTime
       ) {
         result.set(pendingThreadID, threadID);
       }
     }
     return result;
   },
 );
 
 const baseSavedEmojiAvatarSelectorForThread: (
   threadID: string,
   containingThreadID: ?string,
 ) => (BaseAppState<>) => () => ClientAvatar = (
   threadID: string,
   containingThreadID: ?string,
 ) =>
   createSelector(
     (state: BaseAppState<>) => threadInfoSelector(state)[threadID],
     (state: BaseAppState<>) =>
       containingThreadID ? threadInfoSelector(state)[containingThreadID] : null,
     (threadInfo: ThreadInfo, containingThreadInfo: ?ThreadInfo) => {
       return () => {
         let threadAvatar = getAvatarForThread(threadInfo, containingThreadInfo);
         if (threadAvatar.type !== 'emoji') {
           threadAvatar = getRandomDefaultEmojiAvatar();
         }
         return threadAvatar;
       };
     },
   );
 
 const savedEmojiAvatarSelectorForThread: (
   threadID: string,
   containingThreadID: ?string,
 ) => (state: BaseAppState<>) => () => ClientEmojiAvatar = _memoize(
   baseSavedEmojiAvatarSelectorForThread,
 );
 
 const baseThreadInfosSelectorForThreadType: (
   threadType: ThreadType,
 ) => (BaseAppState<>) => $ReadOnlyArray<ThreadInfo> = (
   threadType: ThreadType,
 ) =>
   createSelector(
     (state: BaseAppState<>) => threadInfoSelector(state),
     (threadInfos: {
       +[id: string]: ThreadInfo,
     }): $ReadOnlyArray<ThreadInfo> => {
       const result = [];
 
       for (const threadID in threadInfos) {
         const threadInfo = threadInfos[threadID];
         if (threadInfo.type === threadType) {
           result.push(threadInfo);
         }
       }
 
       return result;
     },
   );
 
 const threadInfosSelectorForThreadType: (
   threadType: ThreadType,
 ) => (state: BaseAppState<>) => $ReadOnlyArray<ThreadInfo> = _memoize(
   baseThreadInfosSelectorForThreadType,
 );
 
 export {
   ancestorThreadInfos,
   threadInfoSelector,
   communityThreadSelector,
   onScreenThreadInfos,
   onScreenEntryEditableThreadInfos,
   entryInfoSelector,
   currentDaysToEntries,
   childThreadInfos,
   containedThreadInfos,
   unreadCount,
   unreadBackgroundCount,
   otherUsersButNoOtherAdmins,
   mostRecentlyReadThread,
   mostRecentlyReadThreadSelector,
   sidebarInfoSelector,
   threadInfoFromSourceMessageIDSelector,
   pendingToRealizedThreadIDsSelector,
   savedEmojiAvatarSelectorForThread,
   threadInfosSelectorForThreadType,
 };
diff --git a/lib/selectors/user-selectors.js b/lib/selectors/user-selectors.js
index d84873449..882376471 100644
--- a/lib/selectors/user-selectors.js
+++ b/lib/selectors/user-selectors.js
@@ -1,261 +1,259 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import { createSelector } from 'reselect';
 
 import {
   getAvatarForUser,
   getRandomDefaultEmojiAvatar,
 } from '../shared/avatar-utils.js';
 import SearchIndex from '../shared/search-index.js';
 import SentencePrefixSearchIndex from '../shared/sentence-prefix-search-index.js';
 import { getSingleOtherUser } from '../shared/thread-utils.js';
 import type { ClientEmojiAvatar } from '../types/avatar-types';
-import type { MinimallyEncodedRelativeMemberInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 import type { BaseAppState } from '../types/redux-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 import {
   type RawThreadInfo,
   type LegacyRelativeMemberInfo,
   type RawThreadInfos,
+  type RelativeMemberInfo,
 } from '../types/thread-types.js';
 import type {
   UserInfos,
   RelativeUserInfo,
   AccountUserInfo,
   CurrentUserInfo,
 } from '../types/user-types.js';
 
 // Used for specific message payloads that include an array of user IDs, ie.
 // array of initial users, array of added users
 function userIDsToRelativeUserInfos(
   userIDs: $ReadOnlyArray<string>,
   viewerID: ?string,
   userInfos: UserInfos,
 ): RelativeUserInfo[] {
   const relativeUserInfos: RelativeUserInfo[] = [];
   for (const userID of userIDs) {
     const username = userInfos[userID] ? userInfos[userID].username : null;
     if (userID === viewerID) {
       relativeUserInfos.unshift({
         id: userID,
         username,
         isViewer: true,
       });
     } else {
       relativeUserInfos.push({
         id: userID,
         username,
         isViewer: false,
       });
     }
   }
   return relativeUserInfos;
 }
 
 function getRelativeMemberInfos(
   threadInfo: ?RawThreadInfo,
   currentUserID: ?string,
   userInfos: UserInfos,
 ): $ReadOnlyArray<LegacyRelativeMemberInfo> {
   const relativeMemberInfos = [];
   if (!threadInfo) {
     return relativeMemberInfos;
   }
   const memberInfos = threadInfo.members;
   for (const memberInfo of memberInfos) {
     if (!memberInfo.role) {
       continue;
     }
     const username = userInfos[memberInfo.id]
       ? userInfos[memberInfo.id].username
       : null;
     if (memberInfo.id === currentUserID) {
       relativeMemberInfos.unshift({
         id: memberInfo.id,
         role: memberInfo.role,
         permissions: memberInfo.permissions,
         username,
         isViewer: true,
         isSender: memberInfo.isSender,
       });
     } else {
       relativeMemberInfos.push({
         id: memberInfo.id,
         role: memberInfo.role,
         permissions: memberInfo.permissions,
         username,
         isViewer: false,
         isSender: memberInfo.isSender,
       });
     }
   }
   return relativeMemberInfos;
 }
 
 const emptyArray: $ReadOnlyArray<LegacyRelativeMemberInfo> = [];
 
 // Includes current user at the start
 const baseRelativeMemberInfoSelectorForMembersOfThread: (
   threadID: ?string,
 ) => (state: BaseAppState<>) => $ReadOnlyArray<LegacyRelativeMemberInfo> = (
   threadID: ?string,
 ) => {
   if (!threadID) {
     return () => emptyArray;
   }
   return createSelector(
     (state: BaseAppState<>) => state.threadStore.threadInfos[threadID],
     (state: BaseAppState<>) =>
       state.currentUserInfo && state.currentUserInfo.id,
     (state: BaseAppState<>) => state.userStore.userInfos,
     getRelativeMemberInfos,
   );
 };
 
 const relativeMemberInfoSelectorForMembersOfThread: (
   threadID: ?string,
-) => (
-  state: BaseAppState<>,
-) => $ReadOnlyArray<
-  LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-> = _memoize(baseRelativeMemberInfoSelectorForMembersOfThread);
+) => (state: BaseAppState<>) => $ReadOnlyArray<RelativeMemberInfo> = _memoize(
+  baseRelativeMemberInfoSelectorForMembersOfThread,
+);
 
 const userInfoSelectorForPotentialMembers: (state: BaseAppState<>) => {
   [id: string]: AccountUserInfo,
 } = createSelector(
   (state: BaseAppState<>) => state.userStore.userInfos,
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo.id,
   (
     userInfos: UserInfos,
     currentUserID: ?string,
   ): { [id: string]: AccountUserInfo } => {
     const availableUsers: { [id: string]: AccountUserInfo } = {};
 
     for (const id in userInfos) {
       const { username, relationshipStatus } = userInfos[id];
       if (id === currentUserID || !username) {
         continue;
       }
       if (
         relationshipStatus !== userRelationshipStatus.BLOCKED_VIEWER &&
         relationshipStatus !== userRelationshipStatus.BOTH_BLOCKED
       ) {
         availableUsers[id] = { id, username, relationshipStatus };
       }
     }
     return availableUsers;
   },
 );
 
 function searchIndexFromUserInfos(userInfos: {
   [id: string]: AccountUserInfo,
 }) {
   const searchIndex = new SearchIndex();
   for (const id in userInfos) {
     searchIndex.addEntry(id, userInfos[id].username);
   }
   return searchIndex;
 }
 
 const userSearchIndexForPotentialMembers: (
   state: BaseAppState<>,
 ) => SearchIndex = createSelector(
   userInfoSelectorForPotentialMembers,
   searchIndexFromUserInfos,
 );
 
 const isLoggedIn = (state: BaseAppState<>): boolean =>
   !!(
     state.currentUserInfo &&
     !state.currentUserInfo.anonymous &&
     state.dataLoaded
   );
 
 const addUsersToSearchIndex = (
   userInfos: UserInfos,
   searchIndex: SearchIndex | SentencePrefixSearchIndex,
 ): void => {
   for (const id in userInfos) {
     const { username } = userInfos[id];
     if (!username) {
       continue;
     }
     searchIndex.addEntry(id, username);
   }
 };
 
 const userStoreSearchIndex: (state: BaseAppState<>) => SearchIndex =
   createSelector(
     (state: BaseAppState<>) => state.userStore.userInfos,
     (userInfos: UserInfos) => {
       const searchIndex = new SearchIndex();
       addUsersToSearchIndex(userInfos, searchIndex);
       return searchIndex;
     },
   );
 
 const userStoreMentionSearchIndex: (
   state: BaseAppState<>,
 ) => SentencePrefixSearchIndex = createSelector(
   (state: BaseAppState<>) => state.userStore.userInfos,
   (userInfos: UserInfos) => {
     const searchIndex = new SentencePrefixSearchIndex();
     addUsersToSearchIndex(userInfos, searchIndex);
     return searchIndex;
   },
 );
 
 const usersWithPersonalThreadSelector: (
   state: BaseAppState<>,
 ) => $ReadOnlySet<string> = createSelector(
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo.id,
   (state: BaseAppState<>) => state.threadStore.threadInfos,
   (viewerID: ?string, threadInfos: RawThreadInfos) => {
     const personalThreadMembers = new Set<string>();
 
     for (const threadID in threadInfos) {
       const thread = threadInfos[threadID];
       if (
         thread.type !== threadTypes.PERSONAL ||
         !thread.members.find(member => member.id === viewerID)
       ) {
         continue;
       }
       const otherMemberID = getSingleOtherUser(thread, viewerID);
       if (otherMemberID) {
         personalThreadMembers.add(otherMemberID);
       }
     }
     return personalThreadMembers;
   },
 );
 
 const savedEmojiAvatarSelectorForCurrentUser: (
   state: BaseAppState<>,
 ) => () => ClientEmojiAvatar = createSelector(
   (state: BaseAppState<>) => state.currentUserInfo && state.currentUserInfo,
   (currentUser: ?CurrentUserInfo) => {
     return () => {
       let userAvatar = getAvatarForUser(currentUser);
       if (userAvatar.type !== 'emoji') {
         userAvatar = getRandomDefaultEmojiAvatar();
       }
       return userAvatar;
     };
   },
 );
 
 export {
   userIDsToRelativeUserInfos,
   getRelativeMemberInfos,
   relativeMemberInfoSelectorForMembersOfThread,
   userInfoSelectorForPotentialMembers,
   userSearchIndexForPotentialMembers,
   isLoggedIn,
   userStoreSearchIndex,
   userStoreMentionSearchIndex,
   usersWithPersonalThreadSelector,
   savedEmojiAvatarSelectorForCurrentUser,
 };
diff --git a/lib/shared/markdown.js b/lib/shared/markdown.js
index 01255f90b..081a649ca 100644
--- a/lib/shared/markdown.js
+++ b/lib/shared/markdown.js
@@ -1,381 +1,376 @@
 // @flow
 
 import invariant from 'invariant';
 
 import {
   markdownUserMentionRegex,
   decodeChatMentionText,
 } from './mention-utils.js';
+import type { MinimallyEncodedResolvedThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedResolvedThreadInfo,
-} from '../types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
   ResolvedThreadInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from '../types/thread-types.js';
 
 // simple-markdown types
 export type State = {
   key?: string | number | void,
   inline?: ?boolean,
   [string]: any,
 };
 
 export type Parser = (source: string, state?: ?State) => Array<SingleASTNode>;
 
 export type Capture =
   | (Array<string> & { +index: number, ... })
   | (Array<string> & { +index?: number, ... });
 
 export type SingleASTNode = {
   type: string,
   [string]: any,
 };
 
 export type ASTNode = SingleASTNode | Array<SingleASTNode>;
 
 type UnTypedASTNode = {
   [string]: any,
   ...
 };
 
 type MatchFunction = { regex?: RegExp, ... } & ((
   source: string,
   state: State,
   prevCapture: string,
 ) => ?Capture);
 
 export type ReactElement = React$Element<any>;
 type ReactElements = React$Node;
 
 export type Output<Result> = (node: ASTNode, state?: ?State) => Result;
 
 type ArrayNodeOutput<Result> = (
   node: Array<SingleASTNode>,
   nestedOutput: Output<Result>,
   state: State,
 ) => Result;
 
 type ArrayRule = {
   +react?: ArrayNodeOutput<ReactElements>,
   +html?: ArrayNodeOutput<string>,
   +[string]: ArrayNodeOutput<any>,
 };
 
 type ParseFunction = (
   capture: Capture,
   nestedParse: Parser,
   state: State,
 ) => UnTypedASTNode | ASTNode;
 
 type ParserRule = {
   +order: number,
   +match: MatchFunction,
   +quality?: (capture: Capture, state: State, prevCapture: string) => number,
   +parse: ParseFunction,
   ...
 };
 
 export type ParserRules = {
   +Array?: ArrayRule,
   +[type: string]: ParserRule,
   ...
 };
 
 const paragraphRegex: RegExp = /^((?:[^\n]*)(?:\n|$))/;
 const paragraphStripTrailingNewlineRegex: RegExp = /^([^\n]*)(?:\n|$)/;
 
 const headingRegex: RegExp = /^ *(#{1,6}) ([^\n]+?)#* *(?![^\n])/;
 const headingStripFollowingNewlineRegex: RegExp =
   /^ *(#{1,6}) ([^\n]+?)#* *(?:\n|$)/;
 
 const fenceRegex: RegExp = /^(`{3,}|~{3,})[^\n]*\n([\s\S]*?\n)\1(?:\n|$)/;
 const fenceStripTrailingNewlineRegex: RegExp =
   /^(`{3,}|~{3,})[^\n]*\n([\s\S]*?)\n\1(?:\n|$)/;
 
 const codeBlockRegex: RegExp = /^(?: {4}[^\n]*\n*?)+(?!\n* {4}[^\n])(?:\n|$)/;
 const codeBlockStripTrailingNewlineRegex: RegExp =
   /^((?: {4}[^\n]*\n*?)+)(?!\n* {4}[^\n])(?:\n|$)/;
 
 const urlRegex: RegExp = /^(https?:\/\/[^\s<]+[^<.,:;"')\]\s])/i;
 
 export type JSONCapture = Array<string> & {
   +json: Object,
   +index?: void,
   ...
 };
 function jsonMatch(source: string): ?JSONCapture {
   if (!source.startsWith('{')) {
     return null;
   }
 
   let jsonString = '';
   let counter = 0;
   for (let i = 0; i < source.length; i++) {
     const char = source[i];
     jsonString += char;
     if (char === '{') {
       counter++;
     } else if (char === '}') {
       counter--;
     }
     if (counter === 0) {
       break;
     }
   }
   if (counter !== 0) {
     return null;
   }
 
   let json;
   try {
     json = JSON.parse(jsonString);
   } catch {
     return null;
   }
   if (!json || typeof json !== 'object') {
     return null;
   }
 
   return { ...([jsonString]: any), json };
 }
 
 function jsonPrint(capture: JSONCapture): string {
   return JSON.stringify(capture.json, null, '  ');
 }
 
 const listRegex = /^( *)([*+-]|\d+\.) ([\s\S]+?)(?:\n{2}|\s*\n*$)/;
 const listItemRegex =
   /^( *)([*+-]|\d+\.) [^\n]*(?:\n(?!\1(?:[*+-]|\d+\.) )[^\n]*)*(\n|$)/gm;
 const listItemPrefixRegex = /^( *)([*+-]|\d+\.) /;
 const listLookBehindRegex = /(?:^|\n)( *)$/;
 
 function matchList(source: string, state: State): RegExp$matchResult | null {
   if (state.inline) {
     return null;
   }
   const prevCaptureStr = state.prevCapture ? state.prevCapture[0] : '';
   const isStartOfLineCapture = listLookBehindRegex.exec(prevCaptureStr);
   if (!isStartOfLineCapture) {
     return null;
   }
   const fullSource = isStartOfLineCapture[1] + source;
   return listRegex.exec(fullSource);
 }
 
 // We've defined our own parse function for lists because simple-markdown
 // handles newlines differently. Outside of that our implementation is fairly
 // similar. For more details about list parsing works, take a look at the
 // comments in the simple-markdown package
 function parseList(
   capture: Capture,
   parse: Parser,
   state: State,
 ): UnTypedASTNode {
   const bullet = capture[2];
   const ordered = bullet.length > 1;
   const start = ordered ? Number(bullet) : undefined;
   const items = capture[0].match(listItemRegex);
 
   let itemContent = null;
   if (items) {
     itemContent = items.map((item: string) => {
       const prefixCapture = listItemPrefixRegex.exec(item);
       const space = prefixCapture ? prefixCapture[0].length : 0;
       const spaceRegex = new RegExp('^ {1,' + space + '}', 'gm');
       const content: string = item
         .replace(spaceRegex, '')
         .replace(listItemPrefixRegex, '');
       // We're handling this different than simple-markdown -
       // each item is a paragraph
       return parse(content, state);
     });
   }
 
   return {
     ordered: ordered,
     start: start,
     items: itemContent,
   };
 }
 
 function createMemberMapForUserMentions(
-  members: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  members: $ReadOnlyArray<RelativeMemberInfo>,
 ): $ReadOnlyMap<string, string> {
   const membersMap = new Map<string, string>();
   members.forEach(member => {
     if (member.role && member.username) {
       membersMap.set(member.username.toLowerCase(), member.id);
     }
   });
 
   return membersMap;
 }
 
 function matchUserMentions(
   membersMap: $ReadOnlyMap<string, string>,
 ): MatchFunction {
   const match = (source: string, state: State) => {
     if (!state.inline) {
       return null;
     }
     const result = markdownUserMentionRegex.exec(source);
     if (!result) {
       return null;
     }
     const username = result[2];
     invariant(username, 'markdownMentionRegex should match two capture groups');
     if (!membersMap.has(username.toLowerCase())) {
       return null;
     }
     return result;
   };
   match.regex = markdownUserMentionRegex;
   return match;
 }
 
 type ParsedUserMention = {
   +content: string,
   +userID: string,
 };
 
 function parseUserMentions(
   membersMap: $ReadOnlyMap<string, string>,
   capture: Capture,
 ): ParsedUserMention {
   const memberUsername = capture[2];
   const memberID = membersMap.get(memberUsername.toLowerCase());
 
   invariant(memberID, 'memberID should be set');
 
   return {
     content: capture[0],
     userID: memberID,
   };
 }
 
 function parseChatMention(
   chatMentionCandidates: ChatMentionCandidates,
   capture: Capture,
 ): {
   threadInfo: ?ResolvedThreadInfo | ?MinimallyEncodedResolvedThreadInfo,
   content: string,
   hasAccessToChat: boolean,
 } {
   const threadInfo = chatMentionCandidates[capture[3]];
   const threadName = threadInfo?.uiName ?? decodeChatMentionText(capture[4]);
   const content = `${capture[1]}@${threadName}`;
   return {
     threadInfo,
     content,
     hasAccessToChat: !!threadInfo,
   };
 }
 
 const blockQuoteRegex: RegExp = /^( *>[^\n]+(?:\n[^\n]+)*)(?:\n|$)/;
 const blockQuoteStripFollowingNewlineRegex: RegExp =
   /^( *>[^\n]+(?:\n[^\n]+)*)(?:\n|$){2}/;
 const maxNestedQuotations = 5;
 
 // Custom match and parse functions implementation for block quotes
 // to allow us to specify quotes parsing depth
 // to avoid too many recursive calls and e.g. app crash
 function matchBlockQuote(quoteRegex: RegExp): MatchFunction {
   return (source: string, state: State) => {
     if (
       state.inline ||
       (state?.quotationsDepth && state.quotationsDepth >= maxNestedQuotations)
     ) {
       return null;
     }
     return quoteRegex.exec(source);
   };
 }
 
 function parseBlockQuote(
   capture: Capture,
   parse: Parser,
   state: State,
 ): UnTypedASTNode {
   const content = capture[1].replace(/^ *> ?/gm, '');
   const currentQuotationsDepth = state?.quotationsDepth ?? 0;
   return {
     content: parse(content, {
       ...state,
       quotationsDepth: currentQuotationsDepth + 1,
     }),
   };
 }
 
 const spoilerRegex: RegExp = /^\|\|([^\n]+?)\|\|/g;
 const replaceSpoilerRegex: RegExp = /\|\|(.+?)\|\|/g;
 const spoilerReplacement: string = '⬛⬛⬛';
 
 const stripSpoilersFromNotifications = (text: string): string =>
   text.replace(replaceSpoilerRegex, spoilerReplacement);
 
 function stripSpoilersFromMarkdownAST(ast: SingleASTNode[]): SingleASTNode[] {
   // Either takes top-level AST, or array of nodes under an items node (list)
   return ast.map(replaceSpoilersFromMarkdownAST);
 }
 
 function replaceSpoilersFromMarkdownAST(node: SingleASTNode): SingleASTNode {
   const { content, items, type } = node;
   if (typeof content === 'string') {
     // Base case (leaf node)
     return node;
   } else if (type === 'spoiler') {
     // The actual point of this function: replacing the spoilers
     return {
       type: 'text',
       content: spoilerReplacement,
     };
   } else if (content) {
     // Common case... most nodes nest children with content
     // If content isn't a string, it should be an array
     return {
       ...node,
       content: stripSpoilersFromMarkdownAST(content),
     };
   } else if (items) {
     // Special case for lists, which has a nested array of arrays within items
     return {
       ...node,
       items: items.map(stripSpoilersFromMarkdownAST),
     };
   }
   throw new Error(
     `unexpected Markdown node of type ${type} with no content or items`,
   );
 }
 
 export {
   paragraphRegex,
   paragraphStripTrailingNewlineRegex,
   urlRegex,
   blockQuoteRegex,
   blockQuoteStripFollowingNewlineRegex,
   headingRegex,
   headingStripFollowingNewlineRegex,
   codeBlockRegex,
   codeBlockStripTrailingNewlineRegex,
   fenceRegex,
   fenceStripTrailingNewlineRegex,
   spoilerRegex,
   matchBlockQuote,
   parseBlockQuote,
   jsonMatch,
   jsonPrint,
   matchList,
   parseList,
   createMemberMapForUserMentions,
   matchUserMentions,
   parseUserMentions,
   stripSpoilersFromNotifications,
   stripSpoilersFromMarkdownAST,
   parseChatMention,
 };
diff --git a/lib/shared/mention-utils.js b/lib/shared/mention-utils.js
index 9d52f06f2..864e2b8c3 100644
--- a/lib/shared/mention-utils.js
+++ b/lib/shared/mention-utils.js
@@ -1,201 +1,196 @@
 // @flow
 
 import { oldValidUsernameRegexString } from './account-utils.js';
 import SentencePrefixSearchIndex from './sentence-prefix-search-index.js';
 import { threadOtherMembers } from './thread-utils.js';
 import { stringForUserExplicit } from './user-utils.js';
 import type {
-  MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedResolvedThreadInfo,
   MinimallyEncodedThreadInfo,
 } from '../types/minimally-encoded-thread-permissions-types.js';
 import { threadTypes } from '../types/thread-types-enum.js';
 import type {
   ThreadInfo,
-  LegacyRelativeMemberInfo,
   ResolvedThreadInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from '../types/thread-types.js';
 import { idSchemaRegex, chatNameMaxLength } from '../utils/validation-utils.js';
 
 export type TypeaheadMatchedStrings = {
   +textBeforeAtSymbol: string,
   +query: string,
 };
 
 export type Selection = {
   +start: number,
   +end: number,
 };
 
 type MentionTypeaheadUserSuggestionItem = {
   +type: 'user',
-  +userInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +userInfo: RelativeMemberInfo,
 };
 
 type MentionTypeaheadChatSuggestionItem = {
   +type: 'chat',
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
 };
 
 export type MentionTypeaheadSuggestionItem =
   | MentionTypeaheadUserSuggestionItem
   | MentionTypeaheadChatSuggestionItem;
 
 export type TypeaheadTooltipActionItem<SuggestionItemType> = {
   +key: string,
   +execute: () => mixed,
   +actionButtonContent: SuggestionItemType,
 };
 
 // The simple-markdown package already breaks words out for us, and we are
 // supposed to only match when the first word of the input matches
 const markdownUserMentionRegex: RegExp = new RegExp(
   `^(@(${oldValidUsernameRegexString}))\\b`,
 );
 
 function isUserMentioned(username: string, text: string): boolean {
   return new RegExp(`\\B@${username}\\b`, 'i').test(text);
 }
 
 const userMentionsExtractionRegex = new RegExp(
   `\\B(@(${oldValidUsernameRegexString}))\\b`,
   'g',
 );
 
 const chatMentionRegexString = `([^\\\\]|^)(@\\[\\[(${idSchemaRegex}):((.{0,${chatNameMaxLength}}?)(?!\\\\).|^)\\]\\])`;
 const chatMentionRegex: RegExp = new RegExp(`^${chatMentionRegexString}`);
 const globalChatMentionRegex: RegExp = new RegExp(chatMentionRegexString, 'g');
 
 function encodeChatMentionText(text: string): string {
   return text.replace(/]/g, '\\]');
 }
 
 function decodeChatMentionText(text: string): string {
   return text.replace(/\\]/g, ']');
 }
 
 function getRawChatMention(
   threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
 ): string {
   return `@[[${threadInfo.id}:${encodeChatMentionText(threadInfo.uiName)}]]`;
 }
 
 function renderChatMentionsWithAltText(text: string): string {
   return text.replace(
     globalChatMentionRegex,
     (...match) => `${match[1]}@${decodeChatMentionText(match[4])}`,
   );
 }
 
 function extractUserMentionsFromText(text: string): string[] {
   const iterator = text.matchAll(userMentionsExtractionRegex);
   return [...iterator].map(matches => matches[2]);
 }
 
 function getTypeaheadRegexMatches(
   text: string,
   selection: Selection,
   regex: RegExp,
 ): null | RegExp$matchResult {
   if (
     selection.start === selection.end &&
     (selection.start === text.length || /\s/.test(text[selection.end]))
   ) {
     return text.slice(0, selection.start).match(regex);
   }
   return null;
 }
 
 function getMentionTypeaheadUserSuggestions(
   userSearchIndex: SentencePrefixSearchIndex,
-  threadMembers: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
   viewerID: ?string,
   usernamePrefix: string,
 ): $ReadOnlyArray<MentionTypeaheadUserSuggestionItem> {
   const userIDs = userSearchIndex.getSearchResults(usernamePrefix);
   const usersInThread = threadOtherMembers(threadMembers, viewerID);
 
   return usersInThread
     .filter(user => usernamePrefix.length === 0 || userIDs.includes(user.id))
     .sort((userA, userB) =>
       stringForUserExplicit(userA).localeCompare(stringForUserExplicit(userB)),
     )
     .map(userInfo => ({ type: 'user', userInfo }));
 }
 
 function getMentionTypeaheadChatSuggestions(
   chatSearchIndex: SentencePrefixSearchIndex,
   chatMentionCandidates: ChatMentionCandidates,
   chatNamePrefix: string,
 ): $ReadOnlyArray<MentionTypeaheadChatSuggestionItem> {
   const result = [];
   const threadIDs = chatSearchIndex.getSearchResults(chatNamePrefix);
   for (const threadID of threadIDs) {
     if (!chatMentionCandidates[threadID]) {
       continue;
     }
     result.push({
       type: 'chat',
       threadInfo: chatMentionCandidates[threadID],
     });
   }
   return result;
 }
 
 function getNewTextAndSelection(
   textBeforeAtSymbol: string,
   entireText: string,
   query: string,
   suggestionText: string,
 ): {
   newText: string,
   newSelectionStart: number,
 } {
   const totalMatchLength = textBeforeAtSymbol.length + query.length + 1; // 1 for @ char
 
   let newSuffixText = entireText.slice(totalMatchLength);
   newSuffixText = (newSuffixText[0] !== ' ' ? ' ' : '') + newSuffixText;
 
   const newText = textBeforeAtSymbol + suggestionText + newSuffixText;
 
   const newSelectionStart = newText.length - newSuffixText.length + 1;
 
   return { newText, newSelectionStart };
 }
 
 function getUserMentionsCandidates(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
-): $ReadOnlyArray<
-  LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-> {
+): $ReadOnlyArray<RelativeMemberInfo> {
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     return threadInfo.members;
   }
   if (parentThreadInfo) {
     return parentThreadInfo.members;
   }
   // This scenario should not occur unless the user logs out while looking at a
   // sidebar. In that scenario, the Redux store may be cleared before ReactNav
   // finishes transitioning away from the previous screen
   return [];
 }
 
 export {
   markdownUserMentionRegex,
   isUserMentioned,
   extractUserMentionsFromText,
   getMentionTypeaheadUserSuggestions,
   getMentionTypeaheadChatSuggestions,
   getNewTextAndSelection,
   getTypeaheadRegexMatches,
   getUserMentionsCandidates,
   chatMentionRegex,
   encodeChatMentionText,
   decodeChatMentionText,
   getRawChatMention,
   renderChatMentionsWithAltText,
 };
diff --git a/lib/shared/thread-utils.js b/lib/shared/thread-utils.js
index ceee6fad6..966418e3d 100644
--- a/lib/shared/thread-utils.js
+++ b/lib/shared/thread-utils.js
@@ -1,2003 +1,1990 @@
 // @flow
 
 import invariant from 'invariant';
 import _find from 'lodash/fp/find.js';
 import _mapValues from 'lodash/fp/mapValues.js';
 import _omitBy from 'lodash/fp/omitBy.js';
 import * as React from 'react';
 
 import { generatePendingThreadColor } from './color-utils.js';
 import { type ParserRules } from './markdown.js';
 import { extractUserMentionsFromText } from './mention-utils.js';
 import { getMessageTitle, isInvalidSidebarSource } from './message-utils.js';
 import { relationshipBlockedInEitherDirection } from './relationship-utils.js';
 import threadWatcher from './thread-watcher.js';
 import {
   fetchMostRecentMessagesActionTypes,
   useFetchMostRecentMessages,
 } from '../actions/message-actions.js';
 import type { RemoveUsersFromThreadInput } from '../actions/thread-actions';
 import {
   changeThreadMemberRolesActionTypes,
   newThreadActionTypes,
   removeUsersFromThreadActionTypes,
 } from '../actions/thread-actions.js';
 import { searchUsers as searchUserCall } from '../actions/user-actions.js';
 import ashoat from '../facts/ashoat.js';
 import genesis from '../facts/genesis.js';
 import { useLoggedInUserInfo } from '../hooks/account-hooks.js';
 import {
   hasPermission,
   permissionsToBitmaskHex,
   threadPermissionsFromBitmaskHex,
 } from '../permissions/minimally-encoded-thread-permissions.js';
 import {
   permissionLookup,
   getAllThreadPermissions,
   makePermissionsBlob,
 } from '../permissions/thread-permissions.js';
 import type {
   ChatThreadItem,
   ChatMessageInfoItem,
 } from '../selectors/chat-selectors.js';
 import { useGlobalThreadSearchIndex } from '../selectors/nav-selectors.js';
 import {
   threadInfoSelector,
   pendingToRealizedThreadIDsSelector,
   threadInfosSelectorForThreadType,
 } from '../selectors/thread-selectors.js';
 import {
   getRelativeMemberInfos,
   usersWithPersonalThreadSelector,
 } from '../selectors/user-selectors.js';
 import { getUserAvatarForThread } from '../shared/avatar-utils.js';
 import type { CalendarQuery } from '../types/entry-types.js';
 import { messageTypes } from '../types/message-types-enum.js';
 import {
   type RobotextMessageInfo,
   type ComposableMessageInfo,
 } from '../types/message-types.js';
 import type {
   MinimallyEncodedRawThreadInfo,
-  MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedThreadCurrentUserInfo,
   MinimallyEncodedThreadInfo,
 } from '../types/minimally-encoded-thread-permissions-types.js';
 import { decodeMinimallyEncodedRoleInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 import { userRelationshipStatus } from '../types/relationship-types.js';
 import {
   threadPermissionPropagationPrefixes,
   threadPermissions,
   configurableCommunityPermissions,
   type ThreadPermission,
   type ThreadPermissionsInfo,
   type UserSurfacedPermission,
   threadPermissionFilterPrefixes,
 } from '../types/thread-permission-types.js';
 import {
   type ThreadType,
   threadTypes,
   threadTypeIsCommunityRoot,
   assertThreadType,
 } from '../types/thread-types-enum.js';
 import {
   type RawThreadInfo,
   type ThreadInfo,
   type MemberInfo,
   type ServerThreadInfo,
-  type LegacyRelativeMemberInfo,
   type ThreadCurrentUserInfo,
   type RoleInfo,
   type ServerMemberInfo,
   type ClientNewThreadRequest,
   type NewThreadResult,
   type ChangeThreadSettingsPayload,
   type UserProfileThreadInfo,
+  type RelativeMemberInfo,
 } from '../types/thread-types.js';
 import { updateTypes } from '../types/update-types-enum.js';
 import { type ClientUpdateInfo } from '../types/update-types.js';
 import type {
   GlobalAccountUserInfo,
   UserInfos,
   AccountUserInfo,
   LoggedInUserInfo,
   UserInfo,
 } from '../types/user-types.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } from '../utils/action-utils.js';
 import type { DispatchActionPromise } from '../utils/action-utils.js';
 import type { GetENSNames } from '../utils/ens-helpers.js';
 import {
   ET,
   entityTextToRawString,
   getEntityTextAsString,
   type ThreadEntity,
   type UserEntity,
 } from '../utils/entity-text.js';
 import { useSelector } from '../utils/redux-utils.js';
 import { firstLine } from '../utils/string-utils.js';
 import { trimText } from '../utils/text-utils.js';
 import { pendingThreadIDRegex } from '../utils/validation-utils.js';
 
 function threadHasPermission(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
   permission: ThreadPermission,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   invariant(
     !permissionsDisabledByBlock.has(permission) || threadInfo?.uiName,
     `${permission} can be disabled by a block, but threadHasPermission can't ` +
       'check for a block on RawThreadInfo. Please pass in ThreadInfo instead!',
   );
   if (threadInfo.minimallyEncoded) {
     return hasPermission(threadInfo.currentUser.permissions, permission);
   }
   return permissionLookup(threadInfo.currentUser.permissions, permission);
 }
 
 function viewerIsMember(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return !!(
     threadInfo &&
     threadInfo.currentUser.role !== null &&
     threadInfo.currentUser.role !== undefined
   );
 }
 
 function threadIsInHome(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return !!(threadInfo && threadInfo.currentUser.subscription.home);
 }
 
 // Can have messages
 function threadInChatList(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return (
     viewerIsMember(threadInfo) &&
     threadHasPermission(threadInfo, threadPermissions.VISIBLE)
   );
 }
 
 function threadIsTopLevel(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsChannel(threadInfo);
 }
 
 function threadIsChannel(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return !!(threadInfo && threadInfo.type !== threadTypes.SIDEBAR);
 }
 
 function threadIsSidebar(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return threadInfo?.type === threadTypes.SIDEBAR;
 }
 
 function threadInBackgroundChatList(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return threadInChatList(threadInfo) && !threadIsInHome(threadInfo);
 }
 
 function threadInHomeChatList(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return threadInChatList(threadInfo) && threadIsInHome(threadInfo);
 }
 
 // Can have Calendar entries,
 // does appear as a top-level entity in the thread list
 function threadInFilterList(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   return (
     threadInChatList(threadInfo) &&
     !!threadInfo &&
     threadInfo.type !== threadTypes.SIDEBAR
   );
 }
 
 function userIsMember(
   threadInfo: ?(
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
   userID: string,
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   if (threadInfo.id === genesis.id) {
     return true;
   }
   return threadInfo.members.some(member => member.id === userID && member.role);
 }
 
 function threadActualMembers(
-  memberInfos: $ReadOnlyArray<
-    MemberInfo | LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  memberInfos: $ReadOnlyArray<MemberInfo | RelativeMemberInfo>,
 ): $ReadOnlyArray<string> {
   return memberInfos
     .filter(memberInfo => memberInfo.role)
     .map(memberInfo => memberInfo.id);
 }
 
-function threadOtherMembers<
-  T: MemberInfo | LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
->(memberInfos: $ReadOnlyArray<T>, viewerID: ?string): $ReadOnlyArray<T> {
+function threadOtherMembers<T: MemberInfo | RelativeMemberInfo>(
+  memberInfos: $ReadOnlyArray<T>,
+  viewerID: ?string,
+): $ReadOnlyArray<T> {
   return memberInfos.filter(
     memberInfo => memberInfo.role && memberInfo.id !== viewerID,
   );
 }
 
 function threadMembersWithoutAddedAshoat<
   T:
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 >(threadInfo: T): $PropertyType<T, 'members'> {
   if (threadInfo.community !== genesis.id) {
     return threadInfo.members;
   }
   return threadInfo.members.filter(
     member => member.id !== ashoat.id || member.role,
   );
 }
 
 function threadIsGroupChat(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): boolean {
   return threadInfo.members.length > 2;
 }
 
 function threadOrParentThreadIsGroupChat(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ) {
   return threadMembersWithoutAddedAshoat(threadInfo).length > 2;
 }
 
 function threadIsPending(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending');
 }
 
 function threadIsPendingSidebar(threadID: ?string): boolean {
   return !!threadID?.startsWith('pending/sidebar/');
 }
 
 function getSingleOtherUser(
   threadInfo:
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   viewerID: ?string,
 ): ?string {
   if (!viewerID) {
     return undefined;
   }
   const otherMembers = threadOtherMembers(threadInfo.members, viewerID);
   if (otherMembers.length !== 1) {
     return undefined;
   }
   return otherMembers[0].id;
 }
 
 function getPendingThreadID(
   threadType: ThreadType,
   memberIDs: $ReadOnlyArray<string>,
   sourceMessageID: ?string,
 ): string {
   const pendingThreadKey = sourceMessageID
     ? `sidebar/${sourceMessageID}`
     : [...memberIDs].sort().join('+');
   const pendingThreadTypeString = sourceMessageID ? '' : `type${threadType}/`;
   return `pending/${pendingThreadTypeString}${pendingThreadKey}`;
 }
 
 type PendingThreadIDContents = {
   +threadType: ThreadType,
   +memberIDs: $ReadOnlyArray<string>,
   +sourceMessageID: ?string,
 };
 
 function parsePendingThreadID(
   pendingThreadID: string,
 ): ?PendingThreadIDContents {
   const pendingRegex = new RegExp(`^${pendingThreadIDRegex}$`);
   const pendingThreadIDMatches = pendingRegex.exec(pendingThreadID);
   if (!pendingThreadIDMatches) {
     return null;
   }
   const [threadTypeString, threadKey] = pendingThreadIDMatches[1].split('/');
   const threadType =
     threadTypeString === 'sidebar'
       ? threadTypes.SIDEBAR
       : assertThreadType(Number(threadTypeString.replace('type', '')));
   const memberIDs = threadTypeString === 'sidebar' ? [] : threadKey.split('+');
   const sourceMessageID = threadTypeString === 'sidebar' ? threadKey : null;
   return {
     threadType,
     memberIDs,
     sourceMessageID,
   };
 }
 
 type UserIDAndUsername = {
   +id: string,
   +username: string,
   ...
 };
 type CreatePendingThreadArgs = {
   +viewerID: string,
   +threadType: ThreadType,
   +members: $ReadOnlyArray<UserIDAndUsername>,
   +parentThreadInfo?: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   +threadColor?: ?string,
   +name?: ?string,
   +sourceMessageID?: string,
 };
 
 function createPendingThread({
   viewerID,
   threadType,
   members,
   parentThreadInfo,
   threadColor,
   name,
   sourceMessageID,
 }: CreatePendingThreadArgs): ThreadInfo {
   const now = Date.now();
   if (!members.some(member => member.id === viewerID)) {
     throw new Error(
       'createPendingThread should be called with the viewer as a member',
     );
   }
 
   const memberIDs = members.map(member => member.id);
   const threadID = getPendingThreadID(threadType, memberIDs, sourceMessageID);
 
   const permissions = {
     [threadPermissions.KNOW_OF]: true,
     [threadPermissions.VISIBLE]: true,
     [threadPermissions.VOICED]: true,
   };
 
   const membershipPermissions = getAllThreadPermissions(
     makePermissionsBlob(permissions, null, threadID, threadType),
     threadID,
   );
   const role = {
     id: `${threadID}/role`,
     name: 'Members',
     permissions,
     isDefault: true,
   };
 
   const rawThreadInfo = {
     id: threadID,
     type: threadType,
     name: name ?? null,
     description: null,
     color: threadColor ?? generatePendingThreadColor(memberIDs),
     creationTime: now,
     parentThreadID: parentThreadInfo?.id ?? null,
     containingThreadID: getContainingThreadID(parentThreadInfo, threadType),
     community: getCommunity(parentThreadInfo),
     members: members.map(member => ({
       id: member.id,
       role: role.id,
       permissions: membershipPermissions,
       isSender: false,
     })),
     roles: {
       [role.id]: role,
     },
     currentUser: {
       role: role.id,
       permissions: membershipPermissions,
       subscription: {
         pushNotifs: false,
         home: false,
       },
       unread: false,
     },
     repliesCount: 0,
     sourceMessageID,
     pinnedCount: 0,
   };
 
   const userInfos: { [string]: UserInfo } = {};
   for (const member of members) {
     const { id, username } = member;
     userInfos[id] = { id, username };
   }
 
   return threadInfoFromRawThreadInfo(rawThreadInfo, viewerID, userInfos);
 }
 
 type PendingPersonalThread = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo: UserInfo,
 };
 
 function createPendingPersonalThread(
   loggedInUserInfo: LoggedInUserInfo,
   userID: string,
   username: string,
 ): PendingPersonalThread {
   const pendingPersonalThreadUserInfo = {
     id: userID,
     username: username,
   };
 
   const threadInfo = createPendingThread({
     viewerID: loggedInUserInfo.id,
     threadType: threadTypes.PERSONAL,
     members: [loggedInUserInfo, pendingPersonalThreadUserInfo],
   });
 
   return { threadInfo, pendingPersonalThreadUserInfo };
 }
 
 function createPendingThreadItem(
   loggedInUserInfo: LoggedInUserInfo,
   user: UserIDAndUsername,
 ): ChatThreadItem {
   const { threadInfo, pendingPersonalThreadUserInfo } =
     createPendingPersonalThread(loggedInUserInfo, user.id, user.username);
 
   return {
     type: 'chatThreadItem',
     threadInfo,
     mostRecentMessageInfo: null,
     mostRecentNonLocalMessage: null,
     lastUpdatedTime: threadInfo.creationTime,
     lastUpdatedTimeIncludingSidebars: threadInfo.creationTime,
     sidebars: [],
     pendingPersonalThreadUserInfo,
   };
 }
 
 // Returns map from lowercase username to AccountUserInfo
 function memberLowercaseUsernameMap(
-  members: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  members: $ReadOnlyArray<RelativeMemberInfo>,
 ): Map<string, AccountUserInfo> {
   const memberMap = new Map<string, AccountUserInfo>();
   for (const member of members) {
     const { id, role, username } = member;
     if (!role || !username) {
       continue;
     }
     memberMap.set(username.toLowerCase(), { id, username });
   }
   return memberMap;
 }
 
 // Returns map from user ID to AccountUserInfo
 function extractMentionedMembers(
   text: string,
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): Map<string, AccountUserInfo> {
   const memberMap = memberLowercaseUsernameMap(threadInfo.members);
   const mentions = extractUserMentionsFromText(text);
 
   const mentionedMembers = new Map<string, AccountUserInfo>();
   for (const mention of mentions) {
     const userInfo = memberMap.get(mention.toLowerCase());
     if (userInfo) {
       mentionedMembers.set(userInfo.id, userInfo);
     }
   }
   return mentionedMembers;
 }
 
 // When a member of the parent is mentioned in a sidebar,
 // they will be automatically added to that sidebar
 function extractNewMentionedParentMembers(
   messageText: string,
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): AccountUserInfo[] {
   const mentionedMembersOfParent = extractMentionedMembers(
     messageText,
     parentThreadInfo,
   );
   for (const member of threadInfo.members) {
     if (member.role) {
       mentionedMembersOfParent.delete(member.id);
     }
   }
   return [...mentionedMembersOfParent.values()];
 }
 
 type SharedCreatePendingSidebarInput = {
   +sourceMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
   +parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +loggedInUserInfo: LoggedInUserInfo,
 };
 
 type BaseCreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +messageTitle: string,
 };
 function baseCreatePendingSidebar(
   input: BaseCreatePendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     messageTitle,
   } = input;
   const { color, type: parentThreadType } = parentThreadInfo;
   const threadName = trimText(messageTitle, 30);
 
   const initialMembers = new Map<string, UserIDAndUsername>();
 
   const { id: viewerID, username: viewerUsername } = loggedInUserInfo;
   initialMembers.set(viewerID, { id: viewerID, username: viewerUsername });
 
   if (userIsMember(parentThreadInfo, sourceMessageInfo.creator.id)) {
     const { id: sourceAuthorID, username: sourceAuthorUsername } =
       sourceMessageInfo.creator;
     invariant(
       sourceAuthorUsername,
       'sourceAuthorUsername should be set in createPendingSidebar',
     );
     const initialMemberUserInfo = {
       id: sourceAuthorID,
       username: sourceAuthorUsername,
     };
     initialMembers.set(sourceAuthorID, initialMemberUserInfo);
   }
 
   const singleOtherUser = getSingleOtherUser(parentThreadInfo, viewerID);
   if (parentThreadType === threadTypes.PERSONAL && singleOtherUser) {
     const singleOtherUsername = parentThreadInfo.members.find(
       member => member.id === singleOtherUser,
     )?.username;
     invariant(
       singleOtherUsername,
       'singleOtherUsername should be set in createPendingSidebar',
     );
     const singleOtherUserInfo = {
       id: singleOtherUser,
       username: singleOtherUsername,
     };
     initialMembers.set(singleOtherUser, singleOtherUserInfo);
   }
 
   if (sourceMessageInfo.type === messageTypes.TEXT) {
     const mentionedMembersOfParent = extractMentionedMembers(
       sourceMessageInfo.text,
       parentThreadInfo,
     );
     for (const [memberID, member] of mentionedMembersOfParent) {
       initialMembers.set(memberID, member);
     }
   }
 
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members: [...initialMembers.values()],
     parentThreadInfo,
     threadColor: color,
     name: threadName,
     sourceMessageID: sourceMessageInfo.id,
   });
 }
 
 // The message title here may have ETH addresses that aren't resolved to ENS
 // names. This function should only be used in cases where we're sure that we
 // don't care about the thread title. We should prefer createPendingSidebar
 // wherever possible
 type CreateUnresolvedPendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
 };
 function createUnresolvedPendingSidebar(
   input: CreateUnresolvedPendingSidebarInput,
 ): ThreadInfo {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = entityTextToRawString(messageTitleEntityText, {
     ignoreViewer: true,
   });
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 type CreatePendingSidebarInput = {
   ...SharedCreatePendingSidebarInput,
   +markdownRules: ParserRules,
   +getENSNames: ?GetENSNames,
 };
 async function createPendingSidebar(
   input: CreatePendingSidebarInput,
 ): Promise<ThreadInfo> {
   const {
     sourceMessageInfo,
     parentThreadInfo,
     loggedInUserInfo,
     markdownRules,
     getENSNames,
   } = input;
 
   const messageTitleEntityText = getMessageTitle(
     sourceMessageInfo,
     parentThreadInfo,
     parentThreadInfo,
     markdownRules,
   );
   const messageTitle = await getEntityTextAsString(
     messageTitleEntityText,
     getENSNames,
     { ignoreViewer: true },
   );
   invariant(
     messageTitle !== null && messageTitle !== undefined,
     'getEntityTextAsString only returns falsey when passed falsey',
   );
 
   return baseCreatePendingSidebar({
     sourceMessageInfo,
     parentThreadInfo,
     messageTitle,
     loggedInUserInfo,
   });
 }
 
 function pendingThreadType(numberOfOtherMembers: number): 4 | 6 | 7 {
   if (numberOfOtherMembers === 0) {
     return threadTypes.PRIVATE;
   } else if (numberOfOtherMembers === 1) {
     return threadTypes.PERSONAL;
   } else {
     return threadTypes.LOCAL;
   }
 }
 
 function threadTypeCanBePending(threadType: ThreadType): boolean {
   return (
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.LOCAL ||
     threadType === threadTypes.SIDEBAR ||
     threadType === threadTypes.PRIVATE
   );
 }
 
 type CreateRealThreadParameters = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +dispatchActionPromise: DispatchActionPromise,
   +createNewThread: ClientNewThreadRequest => Promise<NewThreadResult>,
   +sourceMessageID: ?string,
   +viewerID: ?string,
   +handleError?: () => mixed,
   +calendarQuery: CalendarQuery,
 };
 async function createRealThreadFromPendingThread({
   threadInfo,
   dispatchActionPromise,
   createNewThread,
   sourceMessageID,
   viewerID,
   calendarQuery,
 }: CreateRealThreadParameters): Promise<string> {
   if (!threadIsPending(threadInfo.id)) {
     return threadInfo.id;
   }
 
   const otherMemberIDs = threadOtherMembers(threadInfo.members, viewerID).map(
     member => member.id,
   );
   let resultPromise;
   if (threadInfo.type !== threadTypes.SIDEBAR) {
     invariant(
       otherMemberIDs.length > 0,
       'otherMemberIDs should not be empty for threads',
     );
     resultPromise = createNewThread({
       type: pendingThreadType(otherMemberIDs.length),
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       calendarQuery,
     });
   } else {
     invariant(
       sourceMessageID,
       'sourceMessageID should be set when creating a sidebar',
     );
     resultPromise = createNewThread({
       type: threadTypes.SIDEBAR,
       initialMemberIDs: otherMemberIDs,
       color: threadInfo.color,
       sourceMessageID,
       parentThreadID: threadInfo.parentThreadID,
       name: threadInfo.name,
       calendarQuery,
     });
   }
   dispatchActionPromise(newThreadActionTypes, resultPromise);
   const { newThreadID } = await resultPromise;
   return newThreadID;
 }
 
 type RawThreadInfoOptions = {
   +filterThreadEditAvatarPermission?: boolean,
   +excludePinInfo?: boolean,
   +filterManageInviteLinksPermission?: boolean,
   +filterVoicedInAnnouncementChannelsPermission?: boolean,
 };
 function rawThreadInfoFromServerThreadInfo(
   serverThreadInfo: ServerThreadInfo,
   viewerID: string,
   options?: RawThreadInfoOptions,
 ): ?RawThreadInfo {
   const filterThreadEditAvatarPermission =
     options?.filterThreadEditAvatarPermission;
   const excludePinInfo = options?.excludePinInfo;
   const filterManageInviteLinksPermission =
     options?.filterManageInviteLinksPermission;
   const filterVoicedInAnnouncementChannelsPermission =
     options?.filterVoicedInAnnouncementChannelsPermission;
 
   const filterThreadPermissions = _omitBy(
     (v, k) =>
       (filterThreadEditAvatarPermission &&
         [
           threadPermissions.EDIT_THREAD_AVATAR,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.EDIT_THREAD_AVATAR,
         ].includes(k)) ||
       (excludePinInfo &&
         [
           threadPermissions.MANAGE_PINS,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissions.MANAGE_PINS,
         ].includes(k)) ||
       (filterManageInviteLinksPermission &&
         [threadPermissions.MANAGE_INVITE_LINKS].includes(k)) ||
       (filterVoicedInAnnouncementChannelsPermission &&
         [
           threadPermissions.VOICED_IN_ANNOUNCEMENT_CHANNELS,
           threadPermissionPropagationPrefixes.DESCENDANT +
             threadPermissionFilterPrefixes.TOP_LEVEL +
             threadPermissions.VOICED_IN_ANNOUNCEMENT_CHANNELS,
         ].includes(k)),
   );
 
   const members = [];
   let currentUser;
   for (const serverMember of serverThreadInfo.members) {
     if (
       serverThreadInfo.id === genesis.id &&
       serverMember.id !== viewerID &&
       serverMember.id !== ashoat.id
     ) {
       continue;
     }
 
     const memberPermissions = filterThreadPermissions(serverMember.permissions);
 
     members.push({
       id: serverMember.id,
       role: serverMember.role,
       permissions: memberPermissions,
       isSender: serverMember.isSender,
     });
     if (serverMember.id === viewerID) {
       currentUser = {
         role: serverMember.role,
         permissions: memberPermissions,
         subscription: serverMember.subscription,
         unread: serverMember.unread,
       };
     }
   }
 
   let currentUserPermissions;
   if (currentUser) {
     currentUserPermissions = currentUser.permissions;
   } else {
     currentUserPermissions = filterThreadPermissions(
       getAllThreadPermissions(null, serverThreadInfo.id),
     );
     currentUser = {
       role: null,
       permissions: currentUserPermissions,
       subscription: {
         home: false,
         pushNotifs: false,
       },
       unread: null,
     };
   }
   if (!permissionLookup(currentUserPermissions, threadPermissions.KNOW_OF)) {
     return null;
   }
 
   const rolesWithFilteredThreadPermissions = _mapValues(role => ({
     ...role,
     permissions: filterThreadPermissions(role.permissions),
   }))(serverThreadInfo.roles);
 
   let rawThreadInfo: any = {
     id: serverThreadInfo.id,
     type: serverThreadInfo.type,
     name: serverThreadInfo.name,
     description: serverThreadInfo.description,
     color: serverThreadInfo.color,
     creationTime: serverThreadInfo.creationTime,
     parentThreadID: serverThreadInfo.parentThreadID,
     members,
     roles: rolesWithFilteredThreadPermissions,
     currentUser,
     repliesCount: serverThreadInfo.repliesCount,
     containingThreadID: serverThreadInfo.containingThreadID,
     community: serverThreadInfo.community,
   };
   const sourceMessageID = serverThreadInfo.sourceMessageID;
   if (sourceMessageID) {
     rawThreadInfo = { ...rawThreadInfo, sourceMessageID };
   }
   if (serverThreadInfo.avatar) {
     rawThreadInfo = { ...rawThreadInfo, avatar: serverThreadInfo.avatar };
   }
   if (!excludePinInfo) {
     return {
       ...rawThreadInfo,
       pinnedCount: serverThreadInfo.pinnedCount,
     };
   }
   return rawThreadInfo;
 }
 
 function threadUIName(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): string | ThreadEntity {
   if (threadInfo.name) {
     return firstLine(threadInfo.name);
   }
 
-  let threadMembers:
-    | $ReadOnlyArray<MinimallyEncodedRelativeMemberInfo>
-    | $ReadOnlyArray<LegacyRelativeMemberInfo>;
+  let threadMembers: $ReadOnlyArray<RelativeMemberInfo>;
   let memberEntities: $ReadOnlyArray<UserEntity>;
   // Branching below is to appease flow
   if (threadInfo.minimallyEncoded) {
     threadMembers = threadInfo.members.filter(memberInfo => memberInfo.role);
     memberEntities = threadMembers.map(member => ET.user({ userInfo: member }));
   } else {
     threadMembers = threadInfo.members.filter(memberInfo => memberInfo.role);
     memberEntities = threadMembers.map(member => ET.user({ userInfo: member }));
   }
 
   return {
     type: 'thread',
     id: threadInfo.id,
     name: threadInfo.name,
     display: 'uiName',
     uiName: memberEntities,
     ifJustViewer:
       threadInfo.type === threadTypes.PRIVATE
         ? 'viewer_username'
         : 'just_you_string',
   };
 }
 
 function threadInfoFromRawThreadInfo(
   rawThreadInfo: RawThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadInfo {
   let threadInfo: ThreadInfo = {
     id: rawThreadInfo.id,
     type: rawThreadInfo.type,
     name: rawThreadInfo.name,
     uiName: '',
     description: rawThreadInfo.description,
     color: rawThreadInfo.color,
     creationTime: rawThreadInfo.creationTime,
     parentThreadID: rawThreadInfo.parentThreadID,
     containingThreadID: rawThreadInfo.containingThreadID,
     community: rawThreadInfo.community,
     members: getRelativeMemberInfos(rawThreadInfo, viewerID, userInfos),
     roles: rawThreadInfo.roles,
     currentUser: getCurrentUser(rawThreadInfo, viewerID, userInfos),
     repliesCount: rawThreadInfo.repliesCount,
   };
   threadInfo = {
     ...threadInfo,
     uiName: threadUIName(threadInfo),
   };
   const { sourceMessageID, avatar, pinnedCount } = rawThreadInfo;
   if (sourceMessageID) {
     threadInfo = { ...threadInfo, sourceMessageID };
   }
 
   if (avatar) {
     threadInfo = { ...threadInfo, avatar };
   } else if (
     rawThreadInfo.type === threadTypes.PERSONAL ||
     rawThreadInfo.type === threadTypes.PRIVATE
   ) {
     threadInfo = {
       ...threadInfo,
       avatar: getUserAvatarForThread(rawThreadInfo, viewerID, userInfos),
     };
   }
 
   if (pinnedCount) {
     threadInfo = { ...threadInfo, pinnedCount };
   }
 
   return threadInfo;
 }
 
 function getCurrentUser(
   threadInfo: RawThreadInfo | ThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): ThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
 
   return {
     ...threadInfo.currentUser,
     permissions: {
       ...threadInfo.currentUser.permissions,
       ...disabledPermissions,
     },
   };
 }
 
 function getMinimallyEncodedCurrentUser(
   threadInfo: MinimallyEncodedRawThreadInfo | MinimallyEncodedThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): MinimallyEncodedThreadCurrentUserInfo {
   if (!threadFrozenDueToBlock(threadInfo, viewerID, userInfos)) {
     return threadInfo.currentUser;
   }
   const decodedPermissions = threadPermissionsFromBitmaskHex(
     threadInfo.currentUser.permissions,
   );
   const updatedPermissions = {
     ...decodedPermissions,
     ...disabledPermissions,
   };
   const encodedUpdatedPermissions = permissionsToBitmaskHex(updatedPermissions);
   return {
     ...threadInfo.currentUser,
     permissions: encodedUpdatedPermissions,
   };
 }
 
 function threadIsWithBlockedUserOnly(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
   checkOnlyViewerBlock?: boolean,
 ): boolean {
   if (
     threadOrParentThreadIsGroupChat(threadInfo) ||
     threadOrParentThreadHasAdminRole(threadInfo)
   ) {
     return false;
   }
 
   const otherUserID = getSingleOtherUser(threadInfo, viewerID);
   if (!otherUserID) {
     return false;
   }
   const otherUserRelationshipStatus =
     userInfos[otherUserID]?.relationshipStatus;
 
   if (checkOnlyViewerBlock) {
     return (
       otherUserRelationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
     );
   }
 
   return (
     !!otherUserRelationshipStatus &&
     relationshipBlockedInEitherDirection(otherUserRelationshipStatus)
   );
 }
 
 function threadFrozenDueToBlock(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos);
 }
 
 function threadFrozenDueToViewerBlock(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   viewerID: ?string,
   userInfos: UserInfos,
 ): boolean {
   return threadIsWithBlockedUserOnly(threadInfo, viewerID, userInfos, true);
 }
 
 const threadTypeDescriptions: { [ThreadType]: string } = {
   [threadTypes.COMMUNITY_OPEN_SUBTHREAD]:
     'Anybody in the parent channel can see an open subchannel.',
   [threadTypes.COMMUNITY_SECRET_SUBTHREAD]:
     'Only visible to its members and admins of ancestor channels.',
 };
 
 function memberIsAdmin(
-  memberInfo:
-    | LegacyRelativeMemberInfo
-    | MemberInfo
-    | MinimallyEncodedRelativeMemberInfo,
+  memberInfo: RelativeMemberInfo | MemberInfo,
   threadInfo:
     | ThreadInfo
     | RawThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ): boolean {
   return !!(
     memberInfo.role && roleIsAdminRole(threadInfo.roles[memberInfo.role])
   );
 }
 
 // Since we don't have access to all of the ancestor ThreadInfos, we approximate
 // "parent admin" as anybody with CHANGE_ROLE permissions.
 function memberHasAdminPowers(
-  memberInfo:
-    | LegacyRelativeMemberInfo
-    | MemberInfo
-    | ServerMemberInfo
-    | MinimallyEncodedRelativeMemberInfo,
+  memberInfo: RelativeMemberInfo | MemberInfo | ServerMemberInfo,
 ): boolean {
   if (memberInfo.minimallyEncoded) {
     return hasPermission(memberInfo.permissions, threadPermissions.CHANGE_ROLE);
   }
   return !!memberInfo.permissions[threadPermissions.CHANGE_ROLE]?.value;
 }
 
 function roleIsAdminRole(roleInfo: ?RoleInfo): boolean {
   return !!(roleInfo && !roleInfo.isDefault && roleInfo.name === 'Admins');
 }
 
 function threadHasAdminRole(
   threadInfo: ?(
     | RawThreadInfo
     | ThreadInfo
     | ServerThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo
   ),
 ): boolean {
   if (!threadInfo) {
     return false;
   }
   return !!_find({ name: 'Admins' })(threadInfo.roles);
 }
 
 function threadOrParentThreadHasAdminRole(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ) {
   return (
     threadMembersWithoutAddedAshoat(threadInfo).filter(member =>
       memberHasAdminPowers(member),
     ).length > 0
   );
 }
 
 function identifyInvalidatedThreads(
   updateInfos: $ReadOnlyArray<ClientUpdateInfo>,
 ): Set<string> {
   const invalidated = new Set<string>();
   for (const updateInfo of updateInfos) {
     if (updateInfo.type === updateTypes.DELETE_THREAD) {
       invalidated.add(updateInfo.threadID);
     }
   }
   return invalidated;
 }
 
 const permissionsDisabledByBlockArray = [
   threadPermissions.VOICED,
   threadPermissions.EDIT_ENTRIES,
   threadPermissions.EDIT_THREAD_NAME,
   threadPermissions.EDIT_THREAD_COLOR,
   threadPermissions.EDIT_THREAD_DESCRIPTION,
   threadPermissions.CREATE_SUBCHANNELS,
   threadPermissions.CREATE_SIDEBARS,
   threadPermissions.JOIN_THREAD,
   threadPermissions.EDIT_PERMISSIONS,
   threadPermissions.ADD_MEMBERS,
   threadPermissions.REMOVE_MEMBERS,
 ];
 
 const permissionsDisabledByBlock: Set<ThreadPermission> = new Set(
   permissionsDisabledByBlockArray,
 );
 
 const disabledPermissions: ThreadPermissionsInfo =
   permissionsDisabledByBlockArray.reduce(
     (permissions: ThreadPermissionsInfo, permission: string) => ({
       ...permissions,
       [permission]: { value: false, source: null },
     }),
     {},
   );
 
 // Consider updating itemHeight in native/chat/chat-thread-list.react.js
 // if you change this
 const emptyItemText: string =
   `Background chats are just like normal chats, except they don't ` +
   `contribute to your unread count.\n\n` +
   `To move a chat over here, switch the “Background” option in its settings.`;
 
 function threadNoun(threadType: ThreadType, parentThreadID: ?string): string {
   if (threadType === threadTypes.SIDEBAR) {
     return 'thread';
   } else if (
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD &&
     parentThreadID === genesis.id
   ) {
     return 'chat';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.GENESIS
   ) {
     return 'channel';
   } else {
     return 'chat';
   }
 }
 
 function threadLabel(threadType: ThreadType): string {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD
   ) {
     return 'Open';
   } else if (threadType === threadTypes.PERSONAL) {
     return 'Personal';
   } else if (threadType === threadTypes.SIDEBAR) {
     return 'Thread';
   } else if (threadType === threadTypes.PRIVATE) {
     return 'Private';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS
   ) {
     return 'Community';
   } else {
     return 'Secret';
   }
 }
 
 function useWatchThread(threadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo) {
   const dispatchActionPromise = useDispatchActionPromise();
   const callFetchMostRecentMessages = useFetchMostRecentMessages();
 
   const threadID = threadInfo?.id;
   const threadNotInChatList = !threadInChatList(threadInfo);
   React.useEffect(() => {
     if (threadID && threadNotInChatList) {
       threadWatcher.watchID(threadID);
       dispatchActionPromise(
         fetchMostRecentMessagesActionTypes,
         callFetchMostRecentMessages({ threadID }),
       );
     }
     return () => {
       if (threadID && threadNotInChatList) {
         threadWatcher.removeID(threadID);
       }
     };
   }, [
     callFetchMostRecentMessages,
     dispatchActionPromise,
     threadNotInChatList,
     threadID,
   ]);
 }
 
 type ExistingThreadInfoFinderParams = {
   +searching: boolean,
   +userInfoInputArray: $ReadOnlyArray<AccountUserInfo>,
 };
 type ExistingThreadInfoFinder = (
   params: ExistingThreadInfoFinderParams,
 ) => ?ThreadInfo | ?MinimallyEncodedThreadInfo;
 // TODO (atul): Parameterize function once `createPendingThread` is updated.
 function useExistingThreadInfoFinder(
   baseThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
 ): ExistingThreadInfoFinder {
   const threadInfos = useSelector(threadInfoSelector);
   const loggedInUserInfo = useLoggedInUserInfo();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const pendingToRealizedThreadIDs = useSelector(state =>
     pendingToRealizedThreadIDsSelector(state.threadStore.threadInfos),
   );
   return React.useCallback(
     (
       params: ExistingThreadInfoFinderParams,
     ): ?ThreadInfo | ?MinimallyEncodedThreadInfo => {
       if (!baseThreadInfo) {
         return null;
       }
 
       const realizedThreadInfo = threadInfos[baseThreadInfo.id];
       if (realizedThreadInfo) {
         return realizedThreadInfo;
       }
 
       if (!loggedInUserInfo || !threadIsPending(baseThreadInfo.id)) {
         return baseThreadInfo;
       }
       const viewerID = loggedInUserInfo?.id;
 
       invariant(
         threadTypeCanBePending(baseThreadInfo.type),
         `ThreadInfo has pending ID ${baseThreadInfo.id}, but type that ` +
           `should not be pending ${baseThreadInfo.type}`,
       );
 
       const { searching, userInfoInputArray } = params;
 
       const { sourceMessageID } = baseThreadInfo;
       const pendingThreadID = searching
         ? getPendingThreadID(
             pendingThreadType(userInfoInputArray.length),
             [...userInfoInputArray.map(user => user.id), viewerID],
             sourceMessageID,
           )
         : getPendingThreadID(
             baseThreadInfo.type,
             baseThreadInfo.members.map(member => member.id),
             sourceMessageID,
           );
 
       const realizedThreadID = pendingToRealizedThreadIDs.get(pendingThreadID);
       if (realizedThreadID && threadInfos[realizedThreadID]) {
         return threadInfos[realizedThreadID];
       }
 
       const updatedThread = searching
         ? createPendingThread({
             viewerID,
             threadType: pendingThreadType(userInfoInputArray.length),
             members: [loggedInUserInfo, ...userInfoInputArray],
           })
         : baseThreadInfo;
 
       if (updatedThread.minimallyEncoded) {
         return {
           ...updatedThread,
           currentUser: getMinimallyEncodedCurrentUser(
             updatedThread,
             viewerID,
             userInfos,
           ),
         };
       } else {
         return {
           ...updatedThread,
           currentUser: getCurrentUser(updatedThread, viewerID, userInfos),
         };
       }
     },
     [
       baseThreadInfo,
       threadInfos,
       loggedInUserInfo,
       pendingToRealizedThreadIDs,
       userInfos,
     ],
   );
 }
 
 type ThreadTypeParentRequirement = 'optional' | 'required' | 'disabled';
 function getThreadTypeParentRequirement(
   threadType: ThreadType,
 ): ThreadTypeParentRequirement {
   if (
     threadType === threadTypes.COMMUNITY_OPEN_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_OPEN_ANNOUNCEMENT_SUBTHREAD ||
     //threadType === threadTypes.COMMUNITY_SECRET_SUBTHREAD ||
     threadType === threadTypes.COMMUNITY_SECRET_ANNOUNCEMENT_SUBTHREAD ||
     threadType === threadTypes.SIDEBAR
   ) {
     return 'required';
   } else if (
     threadType === threadTypes.COMMUNITY_ROOT ||
     threadType === threadTypes.COMMUNITY_ANNOUNCEMENT_ROOT ||
     threadType === threadTypes.GENESIS ||
     threadType === threadTypes.PERSONAL ||
     threadType === threadTypes.PRIVATE
   ) {
     return 'disabled';
   } else {
     return 'optional';
   }
 }
 
 function threadMemberHasPermission(
   threadInfo:
     | ServerThreadInfo
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   memberID: string,
   permission: ThreadPermission,
 ): boolean {
   for (const member of threadInfo.members) {
     if (member.id !== memberID) {
       continue;
     }
     if (member.minimallyEncoded) {
       return hasPermission(member.permissions, permission);
     }
     return permissionLookup(member.permissions, permission);
   }
   return false;
 }
 
 function useCanCreateSidebarFromMessage(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   messageInfo: ComposableMessageInfo | RobotextMessageInfo,
 ): boolean {
   const messageCreatorUserInfo = useSelector(
     state => state.userStore.userInfos[messageInfo.creator.id],
   );
 
   if (
     !messageInfo.id ||
     threadInfo.sourceMessageID === messageInfo.id ||
     isInvalidSidebarSource(messageInfo)
   ) {
     return false;
   }
 
   const messageCreatorRelationship = messageCreatorUserInfo?.relationshipStatus;
   const creatorRelationshipHasBlock =
     messageCreatorRelationship &&
     relationshipBlockedInEitherDirection(messageCreatorRelationship);
 
   const hasCreateSidebarsPermission = threadHasPermission(
     threadInfo,
     threadPermissions.CREATE_SIDEBARS,
   );
 
   return hasCreateSidebarsPermission && !creatorRelationshipHasBlock;
 }
 
 function useSidebarExistsOrCanBeCreated(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   messageItem: ChatMessageInfoItem,
 ): boolean {
   const canCreateSidebarFromMessage = useCanCreateSidebarFromMessage(
     threadInfo,
     messageItem.messageInfo,
   );
   return !!messageItem.threadCreatedFromMessage || canCreateSidebarFromMessage;
 }
 
 function checkIfDefaultMembersAreVoiced(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): boolean {
   const defaultRoleID = Object.keys(threadInfo.roles).find(
     roleID => threadInfo.roles[roleID].isDefault,
   );
   invariant(
     defaultRoleID !== undefined,
     'all threads should have a default role',
   );
   const defaultRole = threadInfo.roles[defaultRoleID];
   const defaultRolePermissions = defaultRole.minimallyEncoded
     ? decodeMinimallyEncodedRoleInfo(defaultRole).permissions
     : defaultRole.permissions;
 
   return !!defaultRolePermissions[threadPermissions.VOICED];
 }
 
 const draftKeySuffix = '/message_composer';
 
 function draftKeyFromThreadID(threadID: string): string {
   return `${threadID}${draftKeySuffix}`;
 }
 
 function getContainingThreadID(
   parentThreadInfo:
     | ?ServerThreadInfo
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   threadType: ThreadType,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   if (threadType === threadTypes.SIDEBAR) {
     return parentThreadInfo.id;
   }
   if (!parentThreadInfo.containingThreadID) {
     return parentThreadInfo.id;
   }
   return parentThreadInfo.containingThreadID;
 }
 
 function getCommunity(
   parentThreadInfo:
     | ?ServerThreadInfo
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ): ?string {
   if (!parentThreadInfo) {
     return null;
   }
   const { id, community, type } = parentThreadInfo;
   if (community !== null && community !== undefined) {
     return community;
   }
   if (threadTypeIsCommunityRoot(type)) {
     return id;
   }
   return null;
 }
 
 function getThreadListSearchResults(
   chatListData: $ReadOnlyArray<ChatThreadItem>,
   searchText: string,
   threadFilter: ThreadInfo => boolean,
   threadSearchResults: $ReadOnlySet<string>,
   usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
   loggedInUserInfo: ?LoggedInUserInfo,
 ): $ReadOnlyArray<ChatThreadItem> {
   if (!searchText) {
     return chatListData.filter(
       item =>
         threadIsTopLevel(item.threadInfo) && threadFilter(item.threadInfo),
     );
   }
 
   const privateThreads = [];
   const personalThreads = [];
   const otherThreads = [];
   for (const item of chatListData) {
     if (!threadSearchResults.has(item.threadInfo.id)) {
       continue;
     }
     if (item.threadInfo.type === threadTypes.PRIVATE) {
       privateThreads.push({ ...item, sidebars: [] });
     } else if (item.threadInfo.type === threadTypes.PERSONAL) {
       personalThreads.push({ ...item, sidebars: [] });
     } else {
       otherThreads.push({ ...item, sidebars: [] });
     }
   }
 
   const chatItems: ChatThreadItem[] = [
     ...privateThreads,
     ...personalThreads,
     ...otherThreads,
   ];
   if (loggedInUserInfo) {
     chatItems.push(
       ...usersSearchResults.map(user =>
         createPendingThreadItem(loggedInUserInfo, user),
       ),
     );
   }
   return chatItems;
 }
 
 type ThreadListSearchResult = {
   +threadSearchResults: $ReadOnlySet<string>,
   +usersSearchResults: $ReadOnlyArray<GlobalAccountUserInfo>,
 };
 function useThreadListSearch(
   searchText: string,
   viewerID: ?string,
 ): ThreadListSearchResult {
   const callSearchUsers = useServerCall(searchUserCall);
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
   const searchUsers = React.useCallback(
     async (usernamePrefix: string) => {
       if (usernamePrefix.length === 0) {
         return ([]: GlobalAccountUserInfo[]);
       }
 
       const { userInfos } = await callSearchUsers(usernamePrefix);
       return userInfos.filter(
         info => !usersWithPersonalThread.has(info.id) && info.id !== viewerID,
       );
     },
     [callSearchUsers, usersWithPersonalThread, viewerID],
   );
 
   const [threadSearchResults, setThreadSearchResults] = React.useState(
     new Set<string>(),
   );
   const [usersSearchResults, setUsersSearchResults] = React.useState<
     $ReadOnlyArray<GlobalAccountUserInfo>,
   >([]);
   const threadSearchIndex = useGlobalThreadSearchIndex();
   React.useEffect(() => {
     (async () => {
       const results = threadSearchIndex.getSearchResults(searchText);
       setThreadSearchResults(new Set<string>(results));
       const usersResults = await searchUsers(searchText);
       setUsersSearchResults(usersResults);
     })();
   }, [searchText, threadSearchIndex, searchUsers]);
 
   return { threadSearchResults, usersSearchResults };
 }
 
 function removeMemberFromThread(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
-  memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  memberInfo: RelativeMemberInfo,
   dispatchActionPromise: DispatchActionPromise,
   removeUserFromThreadServerCall: (
     input: RemoveUsersFromThreadInput,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   const customKeyName = `${removeUsersFromThreadActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     removeUsersFromThreadActionTypes,
     removeUserFromThreadServerCall({
       threadID: threadInfo.id,
       memberIDs: [memberInfo.id],
     }),
     { customKeyName },
   );
 }
 
 function switchMemberAdminRoleInThread(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
-  memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  memberInfo: RelativeMemberInfo,
   isCurrentlyAdmin: boolean,
   dispatchActionPromise: DispatchActionPromise,
   changeUserRoleServerCall: (
     threadID: string,
     memberIDs: $ReadOnlyArray<string>,
     newRole: string,
   ) => Promise<ChangeThreadSettingsPayload>,
 ) {
   let newRole = null;
   for (const roleID in threadInfo.roles) {
     const role = threadInfo.roles[roleID];
     if (isCurrentlyAdmin && role.isDefault) {
       newRole = role.id;
       break;
     } else if (!isCurrentlyAdmin && roleIsAdminRole(role)) {
       newRole = role.id;
       break;
     }
   }
   invariant(newRole !== null, 'Could not find new role');
 
   const customKeyName = `${changeThreadMemberRolesActionTypes.started}:${memberInfo.id}`;
   dispatchActionPromise(
     changeThreadMemberRolesActionTypes,
     changeUserRoleServerCall(threadInfo.id, [memberInfo.id], newRole),
     { customKeyName },
   );
 }
 
 function getAvailableThreadMemberActions(
-  memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  memberInfo: RelativeMemberInfo,
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   canEdit: ?boolean = true,
 ): $ReadOnlyArray<'change_role' | 'remove_user'> {
   const role = memberInfo.role;
   if (!canEdit || !role) {
     return [];
   }
 
   const canRemoveMembers = threadHasPermission(
     threadInfo,
     threadPermissions.REMOVE_MEMBERS,
   );
   const canChangeRoles = threadHasPermission(
     threadInfo,
     threadPermissions.CHANGE_ROLE,
   );
 
   const result = [];
 
   if (canChangeRoles && memberInfo.username && threadHasAdminRole(threadInfo)) {
     result.push('change_role');
   }
 
   if (
     canRemoveMembers &&
     !memberInfo.isViewer &&
     (canChangeRoles || threadInfo.roles[role]?.isDefault)
   ) {
     result.push('remove_user');
   }
 
   return result;
 }
 
 function patchThreadInfoToIncludeMentionedMembersOfParent(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   messageText: string,
   viewerID: string,
 ): ThreadInfo | MinimallyEncodedThreadInfo {
   const members: UserIDAndUsername[] = threadInfo.members
     .map(({ id, username }) =>
       username ? ({ id, username }: UserIDAndUsername) : null,
     )
     .filter(Boolean);
   const mentionedNewMembers = extractNewMentionedParentMembers(
     messageText,
     threadInfo,
     parentThreadInfo,
   );
   if (mentionedNewMembers.length === 0) {
     return threadInfo;
   }
   members.push(...mentionedNewMembers);
   return createPendingThread({
     viewerID,
     threadType: threadTypes.SIDEBAR,
     members,
     parentThreadInfo,
     threadColor: threadInfo.color,
     name: threadInfo.name,
     sourceMessageID: threadInfo.sourceMessageID,
   });
 }
 
 function threadInfoInsideCommunity(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
   communityID: string,
 ): boolean {
   return threadInfo.community === communityID || threadInfo.id === communityID;
 }
 
 type RoleAndMemberCount = {
   [roleName: string]: number,
 };
 
 function useRoleMemberCountsForCommunity(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 ): RoleAndMemberCount {
   return React.useMemo(() => {
     const roleIDsToNames: { [string]: string } = {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       roleIDsToNames[roleID] = threadInfo.roles[roleID].name;
     });
 
     const roleNamesToMemberCount: RoleAndMemberCount = {};
 
     threadInfo.members.forEach(({ role: roleID }) => {
       invariant(roleID, 'Community member should have a role');
       const roleName = roleIDsToNames[roleID];
 
       roleNamesToMemberCount[roleName] =
         (roleNamesToMemberCount[roleName] ?? 0) + 1;
     });
 
     // For all community roles with no members, add them to the list with 0
     Object.keys(roleIDsToNames).forEach(roleName => {
       if (roleNamesToMemberCount[roleIDsToNames[roleName]] === undefined) {
         roleNamesToMemberCount[roleIDsToNames[roleName]] = 0;
       }
     });
 
     return roleNamesToMemberCount;
   }, [threadInfo]);
 }
 
 type RoleUserSurfacedPermissions = {
   +[roleName: string]: $ReadOnlySet<UserSurfacedPermission>,
 };
 // Iterates through the existing roles in the community and 'reverse maps'
 // the set of permission literals for each role to user-facing permission enums
 // to help pre-populate the permission checkboxes when editing roles.
 function useRoleUserSurfacedPermissions(
   threadInfo: ThreadInfo,
 ): RoleUserSurfacedPermissions {
   return React.useMemo(() => {
     const roleNamesToPermissions: { [string]: Set<UserSurfacedPermission> } =
       {};
 
     Object.keys(threadInfo.roles).forEach(roleID => {
       const roleName = threadInfo.roles[roleID].name;
       const rolePermissions = Object.keys(threadInfo.roles[roleID].permissions);
       const setOfUserSurfacedPermissions = new Set<UserSurfacedPermission>();
 
       rolePermissions.forEach(rolePermission => {
         const userSurfacedPermission = Object.keys(
           configurableCommunityPermissions,
         ).find(key =>
           configurableCommunityPermissions[key].has(rolePermission),
         );
 
         if (userSurfacedPermission) {
           setOfUserSurfacedPermissions.add(userSurfacedPermission);
         }
       });
       roleNamesToPermissions[roleName] = setOfUserSurfacedPermissions;
     });
 
     return roleNamesToPermissions;
   }, [threadInfo]);
 }
 
 function communityOrThreadNoun(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ): string {
   return threadTypeIsCommunityRoot(threadInfo.type)
     ? 'community'
     : threadNoun(threadInfo.type, threadInfo.parentThreadID);
 }
 
 function getThreadsToDeleteText(
   threadInfo:
     | RawThreadInfo
     | ThreadInfo
     | MinimallyEncodedRawThreadInfo
     | MinimallyEncodedThreadInfo,
 ): string {
   return `${
     threadTypeIsCommunityRoot(threadInfo.type)
       ? 'Subchannels and threads'
       : 'Threads'
   } within this ${communityOrThreadNoun(threadInfo)}`;
 }
 
 function useUserProfileThreadInfo(userInfo: ?UserInfo): ?UserProfileThreadInfo {
   const userID = userInfo?.id;
   const username = userInfo?.username;
 
   const loggedInUserInfo = useLoggedInUserInfo();
   const isViewerProfile = loggedInUserInfo?.id === userID;
 
   const privateThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PRIVATE,
   );
   const privateThreadInfos = useSelector(privateThreadInfosSelector);
 
   const personalThreadInfosSelector = threadInfosSelectorForThreadType(
     threadTypes.PERSONAL,
   );
 
   const personalThreadInfos = useSelector(personalThreadInfosSelector);
 
   const usersWithPersonalThread = useSelector(usersWithPersonalThreadSelector);
 
   return React.useMemo(() => {
     if (!loggedInUserInfo || !userID || !username) {
       return null;
     }
 
     if (isViewerProfile) {
       const privateThreadInfo: ?ThreadInfo = privateThreadInfos[0];
 
       return privateThreadInfo ? { threadInfo: privateThreadInfo } : null;
     }
 
     if (usersWithPersonalThread.has(userID)) {
       const personalThreadInfo: ?ThreadInfo = personalThreadInfos.find(
         threadInfo =>
           userID === getSingleOtherUser(threadInfo, loggedInUserInfo.id),
       );
 
       return personalThreadInfo ? { threadInfo: personalThreadInfo } : null;
     }
 
     const pendingPersonalThreadInfo = createPendingPersonalThread(
       loggedInUserInfo,
       userID,
       username,
     );
 
     return pendingPersonalThreadInfo;
   }, [
     isViewerProfile,
     loggedInUserInfo,
     personalThreadInfos,
     privateThreadInfos,
     userID,
     username,
     usersWithPersonalThread,
   ]);
 }
 
 export {
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   threadIsTopLevel,
   threadIsChannel,
   threadIsSidebar,
   threadInBackgroundChatList,
   threadInHomeChatList,
   threadIsInHome,
   threadInFilterList,
   userIsMember,
   threadActualMembers,
   threadOtherMembers,
   threadIsGroupChat,
   threadIsPending,
   threadIsPendingSidebar,
   getSingleOtherUser,
   getPendingThreadID,
   parsePendingThreadID,
   createPendingThread,
   createUnresolvedPendingSidebar,
   extractNewMentionedParentMembers,
   createPendingSidebar,
   pendingThreadType,
   createRealThreadFromPendingThread,
   getCurrentUser,
   getMinimallyEncodedCurrentUser,
   threadFrozenDueToBlock,
   threadFrozenDueToViewerBlock,
   rawThreadInfoFromServerThreadInfo,
   threadUIName,
   threadInfoFromRawThreadInfo,
   threadTypeDescriptions,
   memberIsAdmin,
   memberHasAdminPowers,
   roleIsAdminRole,
   threadHasAdminRole,
   identifyInvalidatedThreads,
   permissionsDisabledByBlock,
   emptyItemText,
   threadNoun,
   threadLabel,
   useWatchThread,
   useExistingThreadInfoFinder,
   getThreadTypeParentRequirement,
   threadMemberHasPermission,
   useCanCreateSidebarFromMessage,
   useSidebarExistsOrCanBeCreated,
   checkIfDefaultMembersAreVoiced,
   draftKeySuffix,
   draftKeyFromThreadID,
   threadTypeCanBePending,
   getContainingThreadID,
   getCommunity,
   getThreadListSearchResults,
   useThreadListSearch,
   removeMemberFromThread,
   switchMemberAdminRoleInThread,
   getAvailableThreadMemberActions,
   threadMembersWithoutAddedAshoat,
   patchThreadInfoToIncludeMentionedMembersOfParent,
   threadInfoInsideCommunity,
   useRoleMemberCountsForCommunity,
   useRoleUserSurfacedPermissions,
   getThreadsToDeleteText,
   useUserProfileThreadInfo,
 };
diff --git a/lib/types/thread-types.js b/lib/types/thread-types.js
index f4438ace9..7cafaf8dd 100644
--- a/lib/types/thread-types.js
+++ b/lib/types/thread-types.js
@@ -1,484 +1,489 @@
 // @flow
 
 import t, { type TInterface } from 'tcomb';
 
 import {
   type AvatarDBContent,
   type ClientAvatar,
   clientAvatarValidator,
   type UpdateUserAvatarRequest,
 } from './avatar-types.js';
 import type { CalendarQuery } from './entry-types.js';
 import type { Media } from './media-types.js';
 import type {
   MessageTruncationStatuses,
   RawMessageInfo,
 } from './message-types.js';
 import type {
   MinimallyEncodedMemberInfo,
+  MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedResolvedThreadInfo,
   MinimallyEncodedRoleInfo,
 } from './minimally-encoded-thread-permissions-types.js';
 import {
   type ThreadSubscription,
   threadSubscriptionValidator,
 } from './subscription-types.js';
 import {
   type ThreadPermissionsInfo,
   threadPermissionsInfoValidator,
   type ThreadRolePermissionsBlob,
   threadRolePermissionsBlobValidator,
   type UserSurfacedPermission,
 } from './thread-permission-types.js';
 import { type ThreadType, threadTypeValidator } from './thread-types-enum.js';
 import type { ClientUpdateInfo, ServerUpdateInfo } from './update-types.js';
 import type { UserInfo, UserInfos } from './user-types.js';
 import {
   type ThreadEntity,
   threadEntityValidator,
 } from '../utils/entity-text.js';
 import { tID, tShape } from '../utils/validation-utils.js';
 
 export type LegacyMemberInfo = {
   +id: string,
   +role: ?string,
   +permissions: ThreadPermissionsInfo,
   +isSender: boolean,
 };
 export const legacyMemberInfoValidator: TInterface<LegacyMemberInfo> =
   tShape<LegacyMemberInfo>({
     id: t.String,
     role: t.maybe(tID),
     permissions: threadPermissionsInfoValidator,
     isSender: t.Boolean,
   });
 
 export type MemberInfo = LegacyMemberInfo | MinimallyEncodedMemberInfo;
 
 export type LegacyRelativeMemberInfo = $ReadOnly<{
   ...LegacyMemberInfo,
   +username: ?string,
   +isViewer: boolean,
 }>;
 const legacyRelativeMemberInfoValidator = tShape<LegacyRelativeMemberInfo>({
   ...legacyMemberInfoValidator.meta.props,
   username: t.maybe(t.String),
   isViewer: t.Boolean,
 });
 
+export type RelativeMemberInfo =
+  | LegacyRelativeMemberInfo
+  | MinimallyEncodedRelativeMemberInfo;
+
 export type LegacyRoleInfo = {
   +id: string,
   +name: string,
   +permissions: ThreadRolePermissionsBlob,
   +isDefault: boolean,
 };
 export const legacyRoleInfoValidator: TInterface<LegacyRoleInfo> =
   tShape<LegacyRoleInfo>({
     id: tID,
     name: t.String,
     permissions: threadRolePermissionsBlobValidator,
     isDefault: t.Boolean,
   });
 
 export type RoleInfo = LegacyRoleInfo | MinimallyEncodedRoleInfo;
 
 export type ThreadCurrentUserInfo = {
   +role: ?string,
   +permissions: ThreadPermissionsInfo,
   +subscription: ThreadSubscription,
   +unread: ?boolean,
 };
 export const threadCurrentUserInfoValidator: TInterface<ThreadCurrentUserInfo> =
   tShape<ThreadCurrentUserInfo>({
     role: t.maybe(tID),
     permissions: threadPermissionsInfoValidator,
     subscription: threadSubscriptionValidator,
     unread: t.maybe(t.Boolean),
   });
 
 export type RawThreadInfo = {
   +id: string,
   +type: ThreadType,
   +name: ?string,
   +avatar?: ?ClientAvatar,
   +description: ?string,
   +color: string, // hex, without "#" or "0x"
   +creationTime: number, // millisecond timestamp
   +parentThreadID: ?string,
   +containingThreadID: ?string,
   +community: ?string,
   +members: $ReadOnlyArray<LegacyMemberInfo>,
   +roles: { +[id: string]: LegacyRoleInfo },
   +currentUser: ThreadCurrentUserInfo,
   +sourceMessageID?: string,
   +repliesCount: number,
   +pinnedCount?: number,
 };
 export type RawThreadInfos = {
   +[id: string]: RawThreadInfo,
 };
 export const rawThreadInfoValidator: TInterface<RawThreadInfo> =
   tShape<RawThreadInfo>({
     id: tID,
     type: threadTypeValidator,
     name: t.maybe(t.String),
     avatar: t.maybe(clientAvatarValidator),
     description: t.maybe(t.String),
     color: t.String,
     creationTime: t.Number,
     parentThreadID: t.maybe(tID),
     containingThreadID: t.maybe(tID),
     community: t.maybe(tID),
     members: t.list(legacyMemberInfoValidator),
     roles: t.dict(tID, legacyRoleInfoValidator),
     currentUser: threadCurrentUserInfoValidator,
     sourceMessageID: t.maybe(tID),
     repliesCount: t.Number,
     pinnedCount: t.maybe(t.Number),
   });
 
 export type ThreadInfo = {
   +id: string,
   +type: ThreadType,
   +name: ?string,
   +uiName: string | ThreadEntity,
   +avatar?: ?ClientAvatar,
   +description: ?string,
   +color: string, // hex, without "#" or "0x"
   +creationTime: number, // millisecond timestamp
   +parentThreadID: ?string,
   +containingThreadID: ?string,
   +community: ?string,
   +members: $ReadOnlyArray<LegacyRelativeMemberInfo>,
   +roles: { +[id: string]: LegacyRoleInfo },
   +currentUser: ThreadCurrentUserInfo,
   +sourceMessageID?: string,
   +repliesCount: number,
   +pinnedCount?: number,
 };
 export const threadInfoValidator: TInterface<ThreadInfo> = tShape<ThreadInfo>({
   id: tID,
   type: threadTypeValidator,
   name: t.maybe(t.String),
   uiName: t.union([t.String, threadEntityValidator]),
   avatar: t.maybe(clientAvatarValidator),
   description: t.maybe(t.String),
   color: t.String,
   creationTime: t.Number,
   parentThreadID: t.maybe(tID),
   containingThreadID: t.maybe(tID),
   community: t.maybe(tID),
   members: t.list(legacyRelativeMemberInfoValidator),
   roles: t.dict(tID, legacyRoleInfoValidator),
   currentUser: threadCurrentUserInfoValidator,
   sourceMessageID: t.maybe(tID),
   repliesCount: t.Number,
   pinnedCount: t.maybe(t.Number),
 });
 
 export type ResolvedThreadInfo = {
   +id: string,
   +type: ThreadType,
   +name: ?string,
   +uiName: string,
   +avatar?: ?ClientAvatar,
   +description: ?string,
   +color: string, // hex, without "#" or "0x"
   +creationTime: number, // millisecond timestamp
   +parentThreadID: ?string,
   +containingThreadID: ?string,
   +community: ?string,
   +members: $ReadOnlyArray<LegacyRelativeMemberInfo>,
   +roles: { +[id: string]: LegacyRoleInfo },
   +currentUser: ThreadCurrentUserInfo,
   +sourceMessageID?: string,
   +repliesCount: number,
   +pinnedCount?: number,
 };
 
 export type ServerMemberInfo = {
   +id: string,
   +role: ?string,
   +permissions: ThreadPermissionsInfo,
   +subscription: ThreadSubscription,
   +unread: ?boolean,
   +isSender: boolean,
 };
 
 export type ServerThreadInfo = {
   +id: string,
   +type: ThreadType,
   +name: ?string,
   +avatar?: AvatarDBContent,
   +description: ?string,
   +color: string, // hex, without "#" or "0x"
   +creationTime: number, // millisecond timestamp
   +parentThreadID: ?string,
   +containingThreadID: ?string,
   +community: ?string,
   +depth: number,
   +members: $ReadOnlyArray<ServerMemberInfo>,
   +roles: { +[id: string]: LegacyRoleInfo },
   +sourceMessageID?: string,
   +repliesCount: number,
   +pinnedCount: number,
 };
 
 export type ThreadStore = {
   +threadInfos: RawThreadInfos,
 };
 export const threadStoreValidator: TInterface<ThreadStore> =
   tShape<ThreadStore>({
     threadInfos: t.dict(tID, rawThreadInfoValidator),
   });
 
 export type ClientDBThreadInfo = {
   +id: string,
   +type: number,
   +name: ?string,
   +avatar?: ?string,
   +description: ?string,
   +color: string,
   +creationTime: string,
   +parentThreadID: ?string,
   +containingThreadID: ?string,
   +community: ?string,
   +members: string,
   +roles: string,
   +currentUser: string,
   +sourceMessageID?: string,
   +repliesCount: number,
   +pinnedCount?: number,
 };
 
 export type ThreadDeletionRequest = {
   +threadID: string,
   +accountPassword?: empty,
 };
 
 export type RemoveMembersRequest = {
   +threadID: string,
   +memberIDs: $ReadOnlyArray<string>,
 };
 
 export type RoleChangeRequest = {
   +threadID: string,
   +memberIDs: $ReadOnlyArray<string>,
   +role: string,
 };
 
 export type ChangeThreadSettingsResult = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 };
 
 export type ChangeThreadSettingsPayload = {
   +threadID: string,
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
 };
 
 export type LeaveThreadRequest = {
   +threadID: string,
 };
 export type LeaveThreadResult = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
 };
 
 export type LeaveThreadPayload = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
 };
 
 export type ThreadChanges = Partial<{
   +type: ThreadType,
   +name: string,
   +description: string,
   +color: string,
   +parentThreadID: ?string,
   +newMemberIDs: $ReadOnlyArray<string>,
   +avatar: UpdateUserAvatarRequest,
 }>;
 
 export type UpdateThreadRequest = {
   +threadID: string,
   +changes: ThreadChanges,
   +accountPassword?: empty,
 };
 
 export type BaseNewThreadRequest = {
   +id?: ?string,
   +name?: ?string,
   +description?: ?string,
   +color?: ?string,
   +parentThreadID?: ?string,
   +initialMemberIDs?: ?$ReadOnlyArray<string>,
   +ghostMemberIDs?: ?$ReadOnlyArray<string>,
 };
 type NewThreadRequest =
   | {
       +type: 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12,
       ...BaseNewThreadRequest,
     }
   | {
       +type: 5,
       +sourceMessageID: string,
       ...BaseNewThreadRequest,
     };
 
 export type ClientNewThreadRequest = {
   ...NewThreadRequest,
   +calendarQuery: CalendarQuery,
 };
 export type ServerNewThreadRequest = {
   ...NewThreadRequest,
   +calendarQuery?: ?CalendarQuery,
 };
 
 export type NewThreadResponse = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +userInfos: UserInfos,
   +newThreadID: string,
 };
 export type NewThreadResult = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +userInfos: UserInfos,
   +newThreadID: string,
 };
 
 export type ServerThreadJoinRequest = {
   +threadID: string,
   +calendarQuery?: ?CalendarQuery,
   +inviteLinkSecret?: string,
 };
 export type ClientThreadJoinRequest = {
   +threadID: string,
   +calendarQuery: CalendarQuery,
   +inviteLinkSecret?: string,
 };
 export type ThreadJoinResult = {
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
   +userInfos: UserInfos,
 };
 export type ThreadJoinPayload = {
   +updatesResult: {
     newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
   +rawMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +truncationStatuses: MessageTruncationStatuses,
   +userInfos: $ReadOnlyArray<UserInfo>,
 };
 
 export type ThreadFetchMediaResult = {
   +media: $ReadOnlyArray<Media>,
 };
 export type ThreadFetchMediaRequest = {
   +threadID: string,
   +limit: number,
   +offset: number,
 };
 
 export type SidebarInfo = {
   +threadInfo: ThreadInfo,
   +lastUpdatedTime: number,
   +mostRecentNonLocalMessage: ?string,
 };
 
 export type ToggleMessagePinRequest = {
   +messageID: string,
   +action: 'pin' | 'unpin',
 };
 
 export type ToggleMessagePinResult = {
   +newMessageInfos: $ReadOnlyArray<RawMessageInfo>,
   +threadID: string,
 };
 
 type CreateRoleAction = {
   +community: string,
   +name: string,
   +permissions: $ReadOnlyArray<UserSurfacedPermission>,
   +action: 'create_role',
 };
 
 type EditRoleAction = {
   +community: string,
   +existingRoleID: string,
   +name: string,
   +permissions: $ReadOnlyArray<UserSurfacedPermission>,
   +action: 'edit_role',
 };
 
 export type RoleModificationRequest = CreateRoleAction | EditRoleAction;
 
 export type RoleModificationResult = {
   +threadInfo: RawThreadInfo,
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
 };
 
 export type RoleModificationPayload = {
   +threadInfo: RawThreadInfo,
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
 };
 
 export type RoleDeletionRequest = {
   +community: string,
   +roleID: string,
 };
 
 export type RoleDeletionResult = {
   +threadInfo: RawThreadInfo,
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ServerUpdateInfo>,
   },
 };
 
 export type RoleDeletionPayload = {
   +threadInfo: RawThreadInfo,
   +updatesResult: {
     +newUpdates: $ReadOnlyArray<ClientUpdateInfo>,
   },
 };
 
 // We can show a max of 3 sidebars inline underneath their parent in the chat
 // tab. If there are more, we show a button that opens a modal to see the rest
 export const maxReadSidebars = 3;
 
 // We can show a max of 5 sidebars inline underneath their parent
 // in the chat tab if every one of the displayed sidebars is unread
 export const maxUnreadSidebars = 5;
 
 export type ThreadStoreThreadInfos = RawThreadInfos;
 
 export type ChatMentionCandidates = {
   +[id: string]: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
 };
 export type ChatMentionCandidatesObj = {
   +[id: string]: ChatMentionCandidates,
 };
 
 export type UserProfileThreadInfo = {
   +threadInfo: ThreadInfo,
   +pendingPersonalThreadUserInfo?: UserInfo,
 };
diff --git a/lib/utils/role-utils.js b/lib/utils/role-utils.js
index 420313585..951e625b8 100644
--- a/lib/utils/role-utils.js
+++ b/lib/utils/role-utils.js
@@ -1,133 +1,128 @@
 // @flow
 
 import * as React from 'react';
 
 import { useSelector } from './redux-utils.js';
 import { threadInfoSelector } from '../selectors/thread-selectors.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from '../types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from '../types/minimally-encoded-thread-permissions-types.js';
 import {
   configurableCommunityPermissions,
   type ThreadRolePermissionsBlob,
   type UserSurfacedPermission,
 } from '../types/thread-permission-types.js';
 import type {
   ThreadInfo,
-  LegacyRelativeMemberInfo,
   RoleInfo,
+  RelativeMemberInfo,
 } from '../types/thread-types';
 import { threadTypes } from '../types/thread-types-enum.js';
 
 function constructRoleDeletionMessagePrompt(
   defaultRoleName: string,
   memberCount: number,
 ): string {
   let message;
   if (memberCount === 0) {
     message = 'Are you sure you want to delete this role?';
   } else {
     const messageNoun = memberCount === 1 ? 'member' : 'members';
     const messageVerb = memberCount === 1 ? 'is' : 'are';
     message =
       `There ${messageVerb} currently ${memberCount} ${messageNoun} with ` +
       `this role. Deleting the role will automatically assign the ` +
       `${messageNoun} affected to the ${defaultRoleName} role.`;
   }
 
   return message;
 }
 
 type RoleDeletableAndEditableStatus = {
   +isDeletable: boolean,
   +isEditable: boolean,
 };
 function useRoleDeletableAndEditableStatus(
   roleName: string,
   defaultRoleID: string,
   existingRoleID: string,
 ): RoleDeletableAndEditableStatus {
   return React.useMemo(() => {
     const canDelete = roleName !== 'Admins' && defaultRoleID !== existingRoleID;
     const canEdit = roleName !== 'Admins';
 
     return {
       isDeletable: canDelete,
       isEditable: canEdit,
     };
   }, [roleName, defaultRoleID, existingRoleID]);
 }
 
 function useRolesFromCommunityThreadInfo(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
-  memberInfos: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  memberInfos: $ReadOnlyArray<RelativeMemberInfo>,
 ): $ReadOnlyMap<string, ?RoleInfo> {
   // Our in-code system has chat-specific roles, while the
   // user-surfaced system has roles only for communities. We retrieve roles
   // from the top-level community thread for accuracy, with a rare fallback
   // for potential issues reading memberInfos, primarily in GENESIS threads.
   // The special case is GENESIS threads, since per prior discussion
   // (see context: https://linear.app/comm/issue/ENG-4077/), we don't really
   // support roles for it. Also with GENESIS, the list of members are not
   // populated in the community root. So in this case to prevent crashing, we
   // should just return the role name from the current thread info.
   const { community } = threadInfo;
   const communityThreadInfo = useSelector(state =>
     community ? threadInfoSelector(state)[community] : null,
   );
   const topMostThreadInfo = communityThreadInfo || threadInfo;
   const roleMap = new Map<string, ?RoleInfo>();
 
   if (topMostThreadInfo.type === threadTypes.GENESIS) {
     memberInfos.forEach(memberInfo =>
       roleMap.set(
         memberInfo.id,
         memberInfo.role ? threadInfo.roles[memberInfo.role] : null,
       ),
     );
     return roleMap;
   }
 
   const { members: memberInfosFromTopMostThreadInfo, roles } =
     topMostThreadInfo;
   memberInfosFromTopMostThreadInfo.forEach(memberInfo => {
     roleMap.set(memberInfo.id, memberInfo.role ? roles[memberInfo.role] : null);
   });
   return roleMap;
 }
 
 function toggleUserSurfacedPermission(
   rolePermissions: ThreadRolePermissionsBlob,
   userSurfacedPermission: UserSurfacedPermission,
 ): ThreadRolePermissionsBlob {
   const userSurfacedPermissionSet = Array.from(
     configurableCommunityPermissions[userSurfacedPermission],
   );
   const currentRolePermissions = { ...rolePermissions };
 
   const roleHasPermission = userSurfacedPermissionSet.every(
     permission => currentRolePermissions[permission],
   );
 
   if (roleHasPermission) {
     for (const permission of userSurfacedPermissionSet) {
       delete currentRolePermissions[permission];
     }
   } else {
     for (const permission of userSurfacedPermissionSet) {
       currentRolePermissions[permission] = true;
     }
   }
 
   return currentRolePermissions;
 }
 
 export {
   constructRoleDeletionMessagePrompt,
   useRoleDeletableAndEditableStatus,
   useRolesFromCommunityThreadInfo,
   toggleUserSurfacedPermission,
 };
diff --git a/native/chat/chat-input-bar.react.js b/native/chat/chat-input-bar.react.js
index d63707aa9..da5eed834 100644
--- a/native/chat/chat-input-bar.react.js
+++ b/native/chat/chat-input-bar.react.js
@@ -1,1459 +1,1454 @@
 // @flow
 
 import Icon from '@expo/vector-icons/Ionicons.js';
 import type { GenericNavigationAction } from '@react-navigation/core';
 import invariant from 'invariant';
 import _throttle from 'lodash/throttle.js';
 import * as React from 'react';
 import {
   View,
   TextInput,
   TouchableOpacity,
   Platform,
   Text,
   ActivityIndicator,
   TouchableWithoutFeedback,
   NativeAppEventEmitter,
 } from 'react-native';
 import { TextInputKeyboardMangerIOS } from 'react-native-keyboard-input';
 import Animated, {
   EasingNode,
   FadeInDown,
   FadeOutDown,
 } from 'react-native-reanimated';
 
 import {
   moveDraftActionType,
   updateDraftActionType,
 } from 'lib/actions/draft-actions.js';
 import {
   joinThreadActionTypes,
   useJoinThread,
   newThreadActionTypes,
 } from 'lib/actions/thread-actions.js';
 import {
   useChatMentionContext,
   useThreadChatMentionCandidates,
 } from 'lib/hooks/chat-mention-hooks.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreMentionSearchIndex } from 'lib/selectors/user-selectors.js';
 import { colorIsDark } from 'lib/shared/color-utils.js';
 import { useEditMessage } from 'lib/shared/edit-messages-utils.js';
 import {
   getMentionTypeaheadUserSuggestions,
   getMentionTypeaheadChatSuggestions,
   getTypeaheadRegexMatches,
   type Selection,
   getUserMentionsCandidates,
 } from 'lib/shared/mention-utils.js';
 import {
   useNextLocalID,
   trimMessage,
   useMessagePreview,
   messageKey,
   type MessagePreviewResult,
 } from 'lib/shared/message-utils.js';
 import SentencePrefixSearchIndex from 'lib/shared/sentence-prefix-search-index.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadFrozenDueToViewerBlock,
   threadActualMembers,
   checkIfDefaultMembersAreVoiced,
   draftKeyFromThreadID,
 } from 'lib/shared/thread-utils.js';
 import type { CalendarQuery } from 'lib/types/entry-types.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { PhotoPaste } from 'lib/types/media-types.js';
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type {
   SendEditMessageResponse,
   MessageInfo,
 } from 'lib/types/message-types.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { Dispatch } from 'lib/types/redux-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import type {
   ThreadInfo,
   ClientThreadJoinRequest,
   ThreadJoinPayload,
-  LegacyRelativeMemberInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 import { type UserInfos } from 'lib/types/user-types.js';
 import {
   type DispatchActionPromise,
   useDispatchActionPromise,
 } from 'lib/utils/action-utils.js';
 import { useDispatch } from 'lib/utils/redux-utils.js';
 
 import { ChatContext } from './chat-context.js';
 import type { ChatNavigationProp } from './chat.react.js';
 import {
   MessageEditingContext,
   type MessageEditingContextType,
 } from './message-editing-context.react.js';
 import type { RemoveEditMode } from './message-list-types.js';
 import TypeaheadTooltip from './typeahead-tooltip.react.js';
 import MentionTypeaheadTooltipButton from '../chat/mention-typeahead-tooltip-button.react.js';
 import Button from '../components/button.react.js';
 // eslint-disable-next-line import/extensions
 import ClearableTextInput from '../components/clearable-text-input.react';
 import type { SyncedSelectionData } from '../components/selectable-text-input.js';
 // eslint-disable-next-line import/extensions
 import SelectableTextInput from '../components/selectable-text-input.react';
 import SingleLine from '../components/single-line.react.js';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import {
   type InputState,
   InputStateContext,
   type EditInputBarMessageParameters,
 } from '../input/input-state.js';
 import KeyboardInputHost from '../keyboard/keyboard-input-host.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../keyboard/keyboard-state.js';
 import { getKeyboardHeight } from '../keyboard/keyboard.js';
 import { getDefaultTextMessageRules } from '../markdown/rules.react.js';
 import {
   nonThreadCalendarQuery,
   activeThreadSelector,
 } from '../navigation/nav-selectors.js';
 import { NavContext } from '../navigation/navigation-context.js';
 import { OverlayContext } from '../navigation/overlay-context.js';
 import type { OverlayContextType } from '../navigation/overlay-context.js';
 import {
   type NavigationRoute,
   ChatCameraModalRouteName,
   ImagePasteModalRouteName,
 } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { type Colors, useStyles, useColors } from '../themes/colors.js';
 import type { LayoutEvent, ImagePasteEvent } from '../types/react-native.js';
 import {
   type AnimatedViewStyle,
   AnimatedView,
   type ViewStyle,
 } from '../types/styles.js';
 import Alert from '../utils/alert.js';
 import { runTiming } from '../utils/animation-utils.js';
 import { exitEditAlert } from '../utils/edit-messages-utils.js';
 import {
   nativeMentionTypeaheadRegex,
   mentionTypeaheadTooltipActions,
 } from '../utils/typeahead-utils.js';
 
 /* eslint-disable import/no-named-as-default-member */
 const { Value, Clock, block, set, cond, neq, sub, interpolateNode, stopClock } =
   Animated;
 /* eslint-enable import/no-named-as-default-member */
 
 const expandoButtonsAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
   easing: EasingNode.inOut(EasingNode.ease),
 };
 
 const unboundStyles = {
   cameraIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   cameraRollIcon: {
     paddingBottom: Platform.OS === 'android' ? 11 : 8,
     paddingRight: 5,
   },
   container: {
     backgroundColor: 'listBackground',
     paddingLeft: Platform.OS === 'android' ? 10 : 5,
   },
   expandButton: {
     bottom: 0,
     position: 'absolute',
     right: 0,
   },
   expandIcon: {
     paddingBottom: Platform.OS === 'android' ? 13 : 11,
     paddingRight: 2,
   },
   expandoButtons: {
     alignSelf: 'flex-end',
   },
   explanation: {
     color: 'listBackgroundSecondaryLabel',
     paddingBottom: 4,
     paddingTop: 1,
     textAlign: 'center',
   },
   innerExpandoButtons: {
     alignItems: 'flex-end',
     alignSelf: 'flex-end',
     flexDirection: 'row',
   },
   inputContainer: {
     flexDirection: 'row',
   },
   joinButton: {
     borderRadius: 8,
     flex: 1,
     justifyContent: 'center',
     marginHorizontal: 12,
     marginVertical: 3,
   },
   joinButtonContainer: {
     flexDirection: 'row',
     height: 48,
     marginBottom: 8,
   },
   editView: {
     marginLeft: 20,
     marginRight: 20,
     padding: 10,
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   editViewContent: {
     flex: 1,
     paddingRight: 6,
   },
   exitEditButton: {
     marginTop: 6,
   },
   editingLabel: {
     paddingBottom: 4,
   },
   editingMessagePreview: {
     color: 'listForegroundLabel',
   },
   joinButtonContent: {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
   },
   joinButtonTextLight: {
     color: 'white',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinButtonTextDark: {
     color: 'black',
     fontSize: 20,
     marginHorizontal: 4,
   },
   joinThreadLoadingIndicator: {
     paddingVertical: 2,
   },
   sendButton: {
     position: 'absolute',
     bottom: 4,
     left: 0,
   },
   sendIcon: {
     paddingLeft: 9,
     paddingRight: 8,
     paddingVertical: 6,
   },
   textInput: {
     backgroundColor: 'listInputBackground',
     borderRadius: 8,
     color: 'listForegroundLabel',
     fontSize: 16,
     marginLeft: 4,
     marginRight: 4,
     marginTop: 6,
     marginBottom: 8,
     maxHeight: 110,
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
 };
 
 type BaseProps = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 type Props = {
   ...BaseProps,
   +viewerID: ?string,
   +draft: string,
   +joinThreadLoadingStatus: LoadingStatus,
   +threadCreationInProgress: boolean,
   +calendarQuery: () => CalendarQuery,
   +nextLocalID: string,
   +userInfos: UserInfos,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +isActive: boolean,
   +keyboardState: ?KeyboardState,
   +dispatch: Dispatch,
   +dispatchActionPromise: DispatchActionPromise,
   +joinThread: (request: ClientThreadJoinRequest) => Promise<ThreadJoinPayload>,
   +inputState: ?InputState,
   +userSearchIndex: SentencePrefixSearchIndex,
-  +userMentionsCandidates: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  +userMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +chatMentionSearchIndex: SentencePrefixSearchIndex,
   +chatMentionCandidates: ChatMentionCandidates,
   +parentThreadInfo: ?ThreadInfo,
   +editedMessagePreview: ?MessagePreviewResult,
   +editedMessageInfo: ?MessageInfo,
   +editMessage: (
     messageID: string,
     text: string,
   ) => Promise<SendEditMessageResponse>,
   +navigation: ?ChatNavigationProp<'MessageList'>,
   +overlayContext: ?OverlayContextType,
   +messageEditingContext: ?MessageEditingContextType,
 };
 type State = {
   +text: string,
   +textEdited: boolean,
   +buttonsExpanded: boolean,
   +selectionState: SyncedSelectionData,
   +isExitingDuringEditMode: boolean,
 };
 class ChatInputBar extends React.PureComponent<Props, State> {
   textInput: ?React.ElementRef<typeof TextInput>;
   clearableTextInput: ?ClearableTextInput;
   selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>;
 
   expandoButtonsOpen: Value;
   targetExpandoButtonsOpen: Value;
   expandoButtonsStyle: AnimatedViewStyle;
   cameraRollIconStyle: AnimatedViewStyle;
   cameraIconStyle: AnimatedViewStyle;
   expandIconStyle: AnimatedViewStyle;
 
   sendButtonContainerOpen: Value;
   targetSendButtonContainerOpen: Value;
   sendButtonContainerStyle: AnimatedViewStyle;
 
   clearBeforeRemoveListener: () => void;
   clearFocusListener: () => void;
   clearBlurListener: () => void;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       text: props.draft,
       textEdited: false,
       buttonsExpanded: true,
       selectionState: { text: props.draft, selection: { start: 0, end: 0 } },
       isExitingDuringEditMode: false,
     };
 
     this.setUpActionIconAnimations();
     this.setUpSendIconAnimations();
   }
 
   setUpActionIconAnimations() {
     this.expandoButtonsOpen = new Value(1);
     this.targetExpandoButtonsOpen = new Value(1);
     const prevTargetExpandoButtonsOpen = new Value(1);
     const expandoButtonClock = new Clock();
     const expandoButtonsOpen = block([
       cond(neq(this.targetExpandoButtonsOpen, prevTargetExpandoButtonsOpen), [
         stopClock(expandoButtonClock),
         set(prevTargetExpandoButtonsOpen, this.targetExpandoButtonsOpen),
       ]),
       cond(
         neq(this.expandoButtonsOpen, this.targetExpandoButtonsOpen),
         set(
           this.expandoButtonsOpen,
           runTiming(
             expandoButtonClock,
             this.expandoButtonsOpen,
             this.targetExpandoButtonsOpen,
             true,
             expandoButtonsAnimationConfig,
           ),
         ),
       ),
       this.expandoButtonsOpen,
     ]);
 
     this.cameraRollIconStyle = {
       ...unboundStyles.cameraRollIcon,
       opacity: expandoButtonsOpen,
     };
     this.cameraIconStyle = {
       ...unboundStyles.cameraIcon,
       opacity: expandoButtonsOpen,
     };
 
     const expandoButtonsWidth = interpolateNode(expandoButtonsOpen, {
       inputRange: [0, 1],
       outputRange: [26, 66],
     });
     this.expandoButtonsStyle = {
       ...unboundStyles.expandoButtons,
       width: expandoButtonsWidth,
     };
 
     const expandOpacity = sub(1, expandoButtonsOpen);
     this.expandIconStyle = {
       ...unboundStyles.expandIcon,
       opacity: expandOpacity,
     };
   }
 
   setUpSendIconAnimations() {
     const initialSendButtonContainerOpen = trimMessage(this.props.draft)
       ? 1
       : 0;
     this.sendButtonContainerOpen = new Value(initialSendButtonContainerOpen);
     this.targetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const prevTargetSendButtonContainerOpen = new Value(
       initialSendButtonContainerOpen,
     );
     const sendButtonClock = new Clock();
     const sendButtonContainerOpen = block([
       cond(
         neq(
           this.targetSendButtonContainerOpen,
           prevTargetSendButtonContainerOpen,
         ),
         [
           stopClock(sendButtonClock),
           set(
             prevTargetSendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
           ),
         ],
       ),
       cond(
         neq(this.sendButtonContainerOpen, this.targetSendButtonContainerOpen),
         set(
           this.sendButtonContainerOpen,
           runTiming(
             sendButtonClock,
             this.sendButtonContainerOpen,
             this.targetSendButtonContainerOpen,
             true,
             sendButtonAnimationConfig,
           ),
         ),
       ),
       this.sendButtonContainerOpen,
     ]);
 
     const sendButtonContainerWidth = interpolateNode(sendButtonContainerOpen, {
       inputRange: [0, 1],
       outputRange: [4, 38],
     });
     this.sendButtonContainerStyle = { width: sendButtonContainerWidth };
   }
 
   static mediaGalleryOpen(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.mediaGalleryOpen);
   }
 
   static systemKeyboardShowing(props: Props): boolean {
     const { keyboardState } = props;
     return !!(keyboardState && keyboardState.systemKeyboardShowing);
   }
 
   get systemKeyboardShowing(): boolean {
     return ChatInputBar.systemKeyboardShowing(this.props);
   }
 
   immediatelyShowSendButton() {
     this.sendButtonContainerOpen.setValue(1);
     this.targetSendButtonContainerOpen.setValue(1);
   }
 
   updateSendButton(currentText: string) {
     if (this.shouldShowTextInput) {
       this.targetSendButtonContainerOpen.setValue(currentText === '' ? 0 : 1);
     } else {
       this.setUpSendIconAnimations();
     }
   }
 
   componentDidMount() {
     const { isActive, navigation } = this.props;
     if (isActive) {
       this.addEditInputMessageListener();
     }
     if (!navigation) {
       return;
     }
     this.clearBeforeRemoveListener = navigation.addListener(
       'beforeRemove',
       this.onNavigationBeforeRemove,
     );
     this.clearFocusListener = navigation.addListener(
       'focus',
       this.onNavigationFocus,
     );
     this.clearBlurListener = navigation.addListener(
       'blur',
       this.onNavigationBlur,
     );
   }
 
   componentWillUnmount() {
     if (this.props.isActive) {
       this.removeEditInputMessageListener();
     }
     if (this.clearBeforeRemoveListener) {
       this.clearBeforeRemoveListener();
     }
     if (this.clearFocusListener) {
       this.clearFocusListener();
     }
     if (this.clearBlurListener) {
       this.clearBlurListener();
     }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
     if (
       this.state.textEdited &&
       this.state.text &&
       this.props.threadInfo.id !== prevProps.threadInfo.id
     ) {
       this.props.dispatch({
         type: moveDraftActionType,
         payload: {
           oldKey: draftKeyFromThreadID(prevProps.threadInfo.id),
           newKey: draftKeyFromThreadID(this.props.threadInfo.id),
         },
       });
     } else if (!this.state.textEdited && this.props.draft !== prevProps.draft) {
       this.setState({ text: this.props.draft });
     }
     if (this.props.isActive && !prevProps.isActive) {
       this.addEditInputMessageListener();
     } else if (!this.props.isActive && prevProps.isActive) {
       this.removeEditInputMessageListener();
     }
 
     const currentText = trimMessage(this.state.text);
     const prevText = trimMessage(prevState.text);
 
     if (
       (currentText === '' && prevText !== '') ||
       (currentText !== '' && prevText === '')
     ) {
       this.updateSendButton(currentText);
     }
 
     const systemKeyboardIsShowing = ChatInputBar.systemKeyboardShowing(
       this.props,
     );
     const systemKeyboardWasShowing =
       ChatInputBar.systemKeyboardShowing(prevProps);
     if (systemKeyboardIsShowing && !systemKeyboardWasShowing) {
       this.hideButtons();
     } else if (!systemKeyboardIsShowing && systemKeyboardWasShowing) {
       this.expandButtons();
     }
 
     const imageGalleryIsOpen = ChatInputBar.mediaGalleryOpen(this.props);
     const imageGalleryWasOpen = ChatInputBar.mediaGalleryOpen(prevProps);
     if (!imageGalleryIsOpen && imageGalleryWasOpen) {
       this.hideButtons();
     } else if (imageGalleryIsOpen && !imageGalleryWasOpen) {
       this.expandButtons();
       this.setIOSKeyboardHeight();
     }
 
     if (
       this.props.messageEditingContext?.editState.editedMessage &&
       !prevProps.messageEditingContext?.editState.editedMessage
     ) {
       this.blockNavigation();
     }
   }
 
   addEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in addEditInputMessageListener',
     );
     this.props.inputState.addEditInputMessageListener(this.focusAndUpdateText);
   }
 
   removeEditInputMessageListener() {
     invariant(
       this.props.inputState,
       'inputState should be set in removeEditInputMessageListener',
     );
     this.props.inputState.removeEditInputMessageListener(
       this.focusAndUpdateText,
     );
   }
 
   setIOSKeyboardHeight() {
     if (Platform.OS !== 'ios') {
       return;
     }
     const { textInput } = this;
     if (!textInput) {
       return;
     }
     const keyboardHeight = getKeyboardHeight();
     if (keyboardHeight === null || keyboardHeight === undefined) {
       return;
     }
     TextInputKeyboardMangerIOS.setKeyboardHeight(textInput, keyboardHeight);
   }
 
   get shouldShowTextInput(): boolean {
     if (threadHasPermission(this.props.threadInfo, threadPermissions.VOICED)) {
       return true;
     }
     // If the thread is created by somebody else while the viewer is attempting
     // to create it, the threadInfo might be modified in-place
     // and won't list the viewer as a member,
     // which will end up hiding the input.
     // In this case, we will assume that our creation action
     // will get translated into a join, and as long
     // as members are voiced, we can show the input.
     if (!this.props.threadCreationInProgress) {
       return false;
     }
     return checkIfDefaultMembersAreVoiced(this.props.threadInfo);
   }
 
   render(): React.Node {
     const isMember = viewerIsMember(this.props.threadInfo);
     const canJoin = threadHasPermission(
       this.props.threadInfo,
       threadPermissions.JOIN_THREAD,
     );
     let joinButton = null;
     const threadColor = `#${this.props.threadInfo.color}`;
     const isEditMode = this.isEditMode();
     if (!isMember && canJoin && !this.props.threadCreationInProgress) {
       let buttonContent;
       if (this.props.joinThreadLoadingStatus === 'loading') {
         buttonContent = (
           <ActivityIndicator
             size="small"
             color="white"
             style={this.props.styles.joinThreadLoadingIndicator}
           />
         );
       } else {
         const textStyle = colorIsDark(this.props.threadInfo.color)
           ? this.props.styles.joinButtonTextLight
           : this.props.styles.joinButtonTextDark;
         buttonContent = (
           <View style={this.props.styles.joinButtonContent}>
             <SWMansionIcon name="plus" style={textStyle} />
             <Text style={textStyle}>Join Chat</Text>
           </View>
         );
       }
       joinButton = (
         <View style={this.props.styles.joinButtonContainer}>
           <Button
             onPress={this.onPressJoin}
             iosActiveOpacity={0.85}
             style={[
               this.props.styles.joinButton,
               { backgroundColor: threadColor },
             ]}
           >
             {buttonContent}
           </Button>
         </View>
       );
     }
 
     const typeaheadRegexMatches = getTypeaheadRegexMatches(
       this.state.selectionState.text,
       this.state.selectionState.selection,
       nativeMentionTypeaheadRegex,
     );
 
     let typeaheadTooltip = null;
 
     if (typeaheadRegexMatches && !isEditMode) {
       const typeaheadMatchedStrings = {
         textBeforeAtSymbol: typeaheadRegexMatches[1] ?? '',
         query: typeaheadRegexMatches[4] ?? '',
       };
 
       const suggestedUsers = getMentionTypeaheadUserSuggestions(
         this.props.userSearchIndex,
         this.props.userMentionsCandidates,
         this.props.viewerID,
         typeaheadMatchedStrings.query,
       );
       const suggestedChats = getMentionTypeaheadChatSuggestions(
         this.props.chatMentionSearchIndex,
         this.props.chatMentionCandidates,
         typeaheadMatchedStrings.query,
       );
       const suggestions = [...suggestedUsers, ...suggestedChats];
 
       if (suggestions.length > 0) {
         typeaheadTooltip = (
           <TypeaheadTooltip
             text={this.state.text}
             matchedStrings={typeaheadMatchedStrings}
             suggestions={suggestions}
             focusAndUpdateTextAndSelection={this.focusAndUpdateTextAndSelection}
             typeaheadTooltipActionsGetter={mentionTypeaheadTooltipActions}
             TypeaheadTooltipButtonComponent={MentionTypeaheadTooltipButton}
           />
         );
       }
     }
 
     let content;
     const defaultMembersAreVoiced = checkIfDefaultMembersAreVoiced(
       this.props.threadInfo,
     );
     if (this.shouldShowTextInput) {
       content = this.renderInput();
     } else if (
       threadFrozenDueToViewerBlock(
         this.props.threadInfo,
         this.props.viewerID,
         this.props.userInfos,
       ) &&
       threadActualMembers(this.props.threadInfo.members).length === 2
     ) {
       content = (
         <Text style={this.props.styles.explanation}>
           You can&rsquo;t send messages to a user that you&rsquo;ve blocked.
         </Text>
       );
     } else if (isMember) {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     } else if (defaultMembersAreVoiced && canJoin) {
       content = null;
     } else {
       content = (
         <Text style={this.props.styles.explanation}>
           You don&rsquo;t have permission to send messages.
         </Text>
       );
     }
 
     const keyboardInputHost =
       Platform.OS === 'android' ? null : (
         <KeyboardInputHost textInputRef={this.textInput} />
       );
 
     let editedMessage;
     if (isEditMode && this.props.editedMessagePreview) {
       const { message } = this.props.editedMessagePreview;
       editedMessage = (
         <AnimatedView
           style={this.props.styles.editView}
           entering={FadeInDown}
           exiting={FadeOutDown}
         >
           <View style={this.props.styles.editViewContent}>
             <TouchableOpacity
               onPress={this.scrollToEditedMessage}
               activeOpacity={0.4}
             >
               <Text
                 style={[{ color: threadColor }, this.props.styles.editingLabel]}
               >
                 Editing message
               </Text>
               <SingleLine style={this.props.styles.editingMessagePreview}>
                 {message.text}
               </SingleLine>
             </TouchableOpacity>
           </View>
           <SWMansionIcon
             style={this.props.styles.exitEditButton}
             name="cross"
             size={22}
             color={threadColor}
             onPress={this.onPressExitEditMode}
           />
         </AnimatedView>
       );
     }
 
     return (
       <AnimatedView
         style={this.props.styles.container}
         onLayout={this.props.onInputBarLayout}
       >
         {typeaheadTooltip}
         {joinButton}
         {editedMessage}
         {content}
         {keyboardInputHost}
       </AnimatedView>
     );
   }
 
   renderInput(): React.Node {
     const expandoButton = (
       <TouchableOpacity
         onPress={this.expandButtons}
         activeOpacity={0.4}
         style={this.props.styles.expandButton}
       >
         <AnimatedView style={this.expandIconStyle}>
           <SWMansionIcon
             name="chevron-right"
             size={22}
             color={`#${this.props.threadInfo.color}`}
           />
         </AnimatedView>
       </TouchableOpacity>
     );
     const threadColor = `#${this.props.threadInfo.color}`;
     const expandoButtonsViewStyle: Array<ViewStyle> = [
       this.props.styles.innerExpandoButtons,
     ];
     if (this.isEditMode()) {
       expandoButtonsViewStyle.push({ display: 'none' });
     }
     return (
       <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
         <View style={this.props.styles.inputContainer}>
           <AnimatedView style={this.expandoButtonsStyle}>
             <View style={expandoButtonsViewStyle}>
               {this.state.buttonsExpanded ? expandoButton : null}
               <TouchableOpacity
                 onPress={this.showMediaGallery}
                 activeOpacity={0.4}
               >
                 <AnimatedView style={this.cameraRollIconStyle}>
                   <SWMansionIcon
                     name="image-1"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               <TouchableOpacity
                 onPress={this.props.openCamera}
                 activeOpacity={0.4}
                 disabled={!this.state.buttonsExpanded}
               >
                 <AnimatedView style={this.cameraIconStyle}>
                   <SWMansionIcon
                     name="camera"
                     size={28}
                     color={`#${this.props.threadInfo.color}`}
                   />
                 </AnimatedView>
               </TouchableOpacity>
               {this.state.buttonsExpanded ? null : expandoButton}
             </View>
           </AnimatedView>
           <SelectableTextInput
             allowImagePasteForThreadID={this.props.threadInfo.id}
             value={this.state.text}
             onChangeText={this.updateText}
             selection={this.state.selectionState.selection}
             onUpdateSyncedSelectionData={this.updateSelectionState}
             placeholder="Send a message..."
             placeholderTextColor={this.props.colors.listInputButton}
             multiline={true}
             style={this.props.styles.textInput}
             textInputRef={this.textInputRef}
             clearableTextInputRef={this.clearableTextInputRef}
             ref={this.selectableTextInputRef}
             selectionColor={`#${this.props.threadInfo.color}`}
           />
           <AnimatedView style={this.sendButtonContainerStyle}>
             <TouchableOpacity
               onPress={this.onSend}
               activeOpacity={0.4}
               style={this.props.styles.sendButton}
               disabled={trimMessage(this.state.text) === ''}
             >
               <Icon
                 name="md-send"
                 size={25}
                 style={this.props.styles.sendIcon}
                 color={threadColor}
               />
             </TouchableOpacity>
           </AnimatedView>
         </View>
       </TouchableWithoutFeedback>
     );
   }
 
   textInputRef = (textInput: ?React.ElementRef<typeof TextInput>) => {
     this.textInput = textInput;
   };
 
   clearableTextInputRef = (clearableTextInput: ?ClearableTextInput) => {
     this.clearableTextInput = clearableTextInput;
   };
 
   selectableTextInputRef = (
     selectableTextInput: ?React.ElementRef<typeof SelectableTextInput>,
   ) => {
     this.selectableTextInput = selectableTextInput;
   };
 
   updateText = (text: string) => {
     if (this.state.isExitingDuringEditMode) {
       return;
     }
     this.setState({ text, textEdited: true });
     this.props.messageEditingContext?.setEditedMessageChanged(
       this.isMessageEdited(text),
     );
     if (this.isEditMode()) {
       return;
     }
     this.saveDraft(text);
   };
 
   updateSelectionState: (data: SyncedSelectionData) => void = data => {
     this.setState({ selectionState: data });
   };
 
   saveDraft: (text: string) => void = _throttle(text => {
     this.props.dispatch({
       type: updateDraftActionType,
       payload: {
         key: draftKeyFromThreadID(this.props.threadInfo.id),
         text,
       },
     });
   }, 400);
 
   focusAndUpdateTextAndSelection = (text: string, selection: Selection) => {
     this.selectableTextInput?.prepareForSelectionMutation(text, selection);
     this.setState({
       text,
       textEdited: true,
       selectionState: { text, selection },
     });
     this.saveDraft(text);
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateText = (params: EditInputBarMessageParameters) => {
     const { message: text, mode } = params;
     const currentText = this.state.text;
     if (mode === 'replace') {
       this.updateText(text);
     } else if (!currentText.startsWith(text)) {
       const prependedText = text.concat(currentText);
       this.updateText(prependedText);
     }
 
     this.focusAndUpdateButtonsVisibility();
   };
 
   focusAndUpdateButtonsVisibility = () => {
     const { textInput } = this;
     if (!textInput) {
       return;
     }
 
     this.immediatelyShowSendButton();
     this.immediatelyHideButtons();
     textInput.focus();
   };
 
   onSend = async () => {
     if (!trimMessage(this.state.text)) {
       return;
     }
 
     const editedMessage = this.getEditedMessage();
     if (editedMessage && editedMessage.id) {
       this.editMessage(editedMessage.id, this.state.text);
       return;
     }
 
     this.updateSendButton('');
 
     const { clearableTextInput } = this;
     invariant(
       clearableTextInput,
       'clearableTextInput should be sent in onSend',
     );
     let text = await clearableTextInput.getValueAndReset();
     text = trimMessage(text);
     if (!text) {
       return;
     }
 
     const localID = this.props.nextLocalID;
     const creatorID = this.props.viewerID;
     invariant(creatorID, 'should have viewer ID in order to send a message');
     invariant(
       this.props.inputState,
       'inputState should be set in ChatInputBar.onSend',
     );
 
     this.props.inputState.sendTextMessage(
       {
         type: messageTypes.TEXT,
         localID,
         threadID: this.props.threadInfo.id,
         text,
         creatorID,
         time: Date.now(),
       },
       this.props.threadInfo,
       this.props.parentThreadInfo,
     );
   };
 
   isEditMode = (): boolean => {
     const editState = this.props.messageEditingContext?.editState;
     const isThisThread =
       editState?.editedMessage?.threadID === this.props.threadInfo.id;
     return editState?.editedMessage !== null && isThisThread;
   };
 
   isMessageEdited = (newText?: string): boolean => {
     let text = newText ?? this.state.text;
     text = trimMessage(text);
     const originalText = this.props.editedMessageInfo?.text;
     return text !== originalText;
   };
 
   unblockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation) {
       return;
     }
     navigation.setParams({ removeEditMode: null });
   };
 
   removeEditMode: RemoveEditMode = action => {
     const { navigation } = this.props;
     if (!navigation || this.state.isExitingDuringEditMode) {
       return 'ignore_action';
     }
     if (!this.isMessageEdited()) {
       this.unblockNavigation();
       return 'reduce_action';
     }
     const unblockAndDispatch = () => {
       this.unblockNavigation();
       navigation.dispatch(action);
     };
     const onContinueEditing = () => {
       this.props.overlayContext?.resetScrollBlockingModalStatus();
     };
     exitEditAlert({
       onDiscard: unblockAndDispatch,
       onContinueEditing,
     });
     return 'ignore_action';
   };
 
   blockNavigation = () => {
     const { navigation } = this.props;
     if (!navigation || !navigation.isFocused()) {
       return;
     }
     navigation.setParams({
       removeEditMode: this.removeEditMode,
     });
   };
 
   editMessage = async (messageID: string, text: string) => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     text = trimMessage(text);
     try {
       await this.props.editMessage(messageID, text);
       this.exitEditMode();
     } catch (error) {
       Alert.alert(
         'Couldn’t edit the message',
         'Please try again later',
         [{ text: 'OK' }],
         {
           cancelable: true,
         },
       );
     }
   };
 
   getEditedMessage = (): ?MessageInfo => {
     const editState = this.props.messageEditingContext?.editState;
     return editState?.editedMessage;
   };
 
   onPressExitEditMode = () => {
     if (!this.isMessageEdited()) {
       this.exitEditMode();
       return;
     }
     exitEditAlert({
       onDiscard: this.exitEditMode,
     });
   };
 
   scrollToEditedMessage = () => {
     const editedMessage = this.getEditedMessage();
     if (!editedMessage) {
       return;
     }
     const editedMessageKey = messageKey(editedMessage);
     this.props.inputState?.scrollToMessage(editedMessageKey);
   };
 
   exitEditMode = () => {
     this.props.messageEditingContext?.setEditedMessage(null, () => {
       this.unblockNavigation();
       this.updateText(this.props.draft);
       this.focusAndUpdateButtonsVisibility();
       this.updateSendButton(this.props.draft);
     });
   };
 
   onNavigationFocus = () => {
     this.setState({ isExitingDuringEditMode: false });
   };
 
   onNavigationBlur = () => {
     if (!this.isEditMode()) {
       return;
     }
     this.setState(
       { text: this.props.draft, isExitingDuringEditMode: true },
       this.exitEditMode,
     );
   };
 
   onNavigationBeforeRemove = (e: {
     +data: { +action: GenericNavigationAction },
     +preventDefault: () => void,
     ...
   }) => {
     if (!this.isEditMode()) {
       return;
     }
     const { action } = e.data;
     e.preventDefault();
     const saveExit = () => {
       this.props.messageEditingContext?.setEditedMessage(null, () => {
         this.setState({ isExitingDuringEditMode: true }, () => {
           if (!this.props.navigation) {
             return;
           }
           this.props.navigation.dispatch(action);
         });
       });
     };
     if (!this.isMessageEdited()) {
       saveExit();
       return;
     }
     exitEditAlert({
       onDiscard: saveExit,
     });
   };
 
   onPressJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };
 
   async joinAction(): Promise<ThreadJoinPayload> {
     const query = this.props.calendarQuery();
     return await this.props.joinThread({
       threadID: this.props.threadInfo.id,
       calendarQuery: {
         startDate: query.startDate,
         endDate: query.endDate,
         filters: [
           ...query.filters,
           { type: 'threads', threadIDs: [this.props.threadInfo.id] },
         ],
       },
     });
   }
 
   expandButtons = () => {
     if (this.state.buttonsExpanded || this.isEditMode()) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(1);
     this.setState({ buttonsExpanded: true });
   };
 
   hideButtons() {
     if (
       ChatInputBar.mediaGalleryOpen(this.props) ||
       !this.systemKeyboardShowing ||
       !this.state.buttonsExpanded
     ) {
       return;
     }
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   immediatelyHideButtons() {
     this.expandoButtonsOpen.setValue(0);
     this.targetExpandoButtonsOpen.setValue(0);
     this.setState({ buttonsExpanded: false });
   }
 
   showMediaGallery = () => {
     const { keyboardState } = this.props;
     invariant(keyboardState, 'keyboardState should be initialized');
     keyboardState.showMediaGallery(this.props.threadInfo);
   };
 
   dismissKeyboard = () => {
     const { keyboardState } = this.props;
     keyboardState && keyboardState.dismissKeyboard();
   };
 }
 
 const joinThreadLoadingStatusSelector = createLoadingStatusSelector(
   joinThreadActionTypes,
 );
 const createThreadLoadingStatusSelector =
   createLoadingStatusSelector(newThreadActionTypes);
 
 type ConnectedChatInputBarBaseProps = {
   ...BaseProps,
   +onInputBarLayout?: (event: LayoutEvent) => mixed,
   +openCamera: () => mixed,
   +navigation?: ChatNavigationProp<'MessageList'>,
 };
 function ConnectedChatInputBarBase(props: ConnectedChatInputBarBaseProps) {
   const navContext = React.useContext(NavContext);
   const keyboardState = React.useContext(KeyboardContext);
   const inputState = React.useContext(InputStateContext);
   const overlayContext = React.useContext(OverlayContext);
 
   const viewerID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const draft = useSelector(
     state =>
       state.draftStore.drafts[draftKeyFromThreadID(props.threadInfo.id)] ?? '',
   );
   const joinThreadLoadingStatus = useSelector(joinThreadLoadingStatusSelector);
   const createThreadLoadingStatus = useSelector(
     createThreadLoadingStatusSelector,
   );
   const threadCreationInProgress = createThreadLoadingStatus === 'loading';
   const calendarQuery = useSelector(state =>
     nonThreadCalendarQuery({
       redux: state,
       navContext,
     }),
   );
   const nextLocalID = useNextLocalID();
   const userInfos = useSelector(state => state.userStore.userInfos);
 
   const styles = useStyles(unboundStyles);
   const colors = useColors();
 
   const isActive = React.useMemo(
     () => props.threadInfo.id === activeThreadSelector(navContext),
     [props.threadInfo.id, navContext],
   );
 
   const dispatch = useDispatch();
   const dispatchActionPromise = useDispatchActionPromise();
   const callJoinThread = useJoinThread();
 
   const userSearchIndex = useSelector(userStoreMentionSearchIndex);
 
   const { getChatMentionSearchIndex } = useChatMentionContext();
   const chatMentionSearchIndex = getChatMentionSearchIndex(props.threadInfo);
 
   const { parentThreadID } = props.threadInfo;
   const parentThreadInfo = useSelector(state =>
     parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
   );
 
   const userMentionsCandidates = getUserMentionsCandidates(
     props.threadInfo,
     parentThreadInfo,
   );
 
   const chatMentionCandidates = useThreadChatMentionCandidates(
     props.threadInfo,
   );
 
   const messageEditingContext = React.useContext(MessageEditingContext);
 
   const editedMessageInfo = messageEditingContext?.editState.editedMessage;
   const editedMessagePreview = useMessagePreview(
     editedMessageInfo,
     props.threadInfo,
     getDefaultTextMessageRules(chatMentionCandidates).simpleMarkdownRules,
   );
   const editMessage = useEditMessage();
 
   return (
     <ChatInputBar
       {...props}
       viewerID={viewerID}
       draft={draft}
       joinThreadLoadingStatus={joinThreadLoadingStatus}
       threadCreationInProgress={threadCreationInProgress}
       calendarQuery={calendarQuery}
       nextLocalID={nextLocalID}
       userInfos={userInfos}
       colors={colors}
       styles={styles}
       isActive={isActive}
       keyboardState={keyboardState}
       dispatch={dispatch}
       dispatchActionPromise={dispatchActionPromise}
       joinThread={callJoinThread}
       inputState={inputState}
       userSearchIndex={userSearchIndex}
       userMentionsCandidates={userMentionsCandidates}
       chatMentionSearchIndex={chatMentionSearchIndex}
       chatMentionCandidates={chatMentionCandidates}
       parentThreadInfo={parentThreadInfo}
       editedMessagePreview={editedMessagePreview}
       editedMessageInfo={editedMessageInfo}
       editMessage={editMessage}
       navigation={props.navigation}
       overlayContext={overlayContext}
       messageEditingContext={messageEditingContext}
     />
   );
 }
 
 type DummyChatInputBarProps = {
   ...BaseProps,
   +onHeightMeasured: (height: number) => mixed,
 };
 const noop = () => {};
 function DummyChatInputBar(props: DummyChatInputBarProps): React.Node {
   const { onHeightMeasured, ...restProps } = props;
   const onInputBarLayout = React.useCallback(
     (event: LayoutEvent) => {
       const { height } = event.nativeEvent.layout;
       onHeightMeasured(height);
     },
     [onHeightMeasured],
   );
   return (
     <View pointerEvents="none">
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={noop}
       />
     </View>
   );
 }
 
 type ChatInputBarProps = {
   ...BaseProps,
   +navigation: ChatNavigationProp<'MessageList'>,
   +route: NavigationRoute<'MessageList'>,
 };
 const ConnectedChatInputBar: React.ComponentType<ChatInputBarProps> =
   React.memo<ChatInputBarProps>(function ConnectedChatInputBar(
     props: ChatInputBarProps,
   ) {
     const { navigation, route, ...restProps } = props;
     const keyboardState = React.useContext(KeyboardContext);
 
     const { threadInfo } = props;
     const imagePastedCallback = React.useCallback(
       (imagePastedEvent: ImagePasteEvent) => {
         if (threadInfo.id !== imagePastedEvent.threadID) {
           return;
         }
         const pastedImage: PhotoPaste = {
           step: 'photo_paste',
           dimensions: {
             height: imagePastedEvent.height,
             width: imagePastedEvent.width,
           },
           filename: imagePastedEvent.fileName,
           uri: 'file://' + imagePastedEvent.filePath,
           selectTime: 0,
           sendTime: 0,
           retries: 0,
         };
         navigation.navigate<'ImagePasteModal'>({
           name: ImagePasteModalRouteName,
           params: {
             imagePasteStagingInfo: pastedImage,
             thread: threadInfo,
           },
         });
       },
       [navigation, threadInfo],
     );
 
     React.useEffect(() => {
       const imagePasteListener = NativeAppEventEmitter.addListener(
         'imagePasted',
         imagePastedCallback,
       );
       return () => imagePasteListener.remove();
     }, [imagePastedCallback]);
 
     const chatContext = React.useContext(ChatContext);
     invariant(chatContext, 'should be set');
     const { setChatInputBarHeight, deleteChatInputBarHeight } = chatContext;
     const onInputBarLayout = React.useCallback(
       (event: LayoutEvent) => {
         const { height } = event.nativeEvent.layout;
         setChatInputBarHeight(threadInfo.id, height);
       },
       [threadInfo.id, setChatInputBarHeight],
     );
 
     React.useEffect(() => {
       return () => {
         deleteChatInputBarHeight(threadInfo.id);
       };
     }, [deleteChatInputBarHeight, threadInfo.id]);
 
     const openCamera = React.useCallback(() => {
       keyboardState?.dismissKeyboard();
       navigation.navigate<'ChatCameraModal'>({
         name: ChatCameraModalRouteName,
         params: {
           presentedFrom: route.key,
           thread: threadInfo,
         },
       });
     }, [keyboardState, navigation, route.key, threadInfo]);
 
     return (
       <ConnectedChatInputBarBase
         {...restProps}
         onInputBarLayout={onInputBarLayout}
         openCamera={openCamera}
         navigation={navigation}
       />
     );
   });
 
 export { ConnectedChatInputBar as ChatInputBar, DummyChatInputBar };
diff --git a/native/chat/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
index 1b2f55c66..a87bdf43e 100644
--- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js
+++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
@@ -1,118 +1,112 @@
 // @flow
 
 import * as React from 'react';
 
 import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { removeMemberFromThread } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  ThreadInfo,
-  LegacyRelativeMemberInfo,
-} from 'lib/types/thread-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 
 import ThreadSettingsMemberTooltipButton from './thread-settings-member-tooltip-button.react.js';
 import type { AppNavigationProp } from '../../navigation/app-navigator.react';
 import { ChangeRolesScreenRouteName } from '../../navigation/route-names.js';
 import {
   createTooltip,
   type TooltipParams,
   type TooltipRoute,
   type BaseTooltipProps,
   type TooltipMenuProps,
 } from '../../tooltip/tooltip.react.js';
 import Alert from '../../utils/alert.js';
 
 export type ThreadSettingsMemberTooltipModalParams = TooltipParams<{
-  +memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 }>;
 
 function useOnRemoveUser(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { memberInfo, threadInfo } = route.params;
   const boundRemoveUsersFromThread = useRemoveUsersFromThread();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const onConfirmRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [threadInfo, memberInfo, dispatchActionPromise, boundRemoveUsersFromThread],
   );
 
   const userText = stringForUser(memberInfo);
   return React.useCallback(() => {
     Alert.alert(
       'Confirm removal',
       `Are you sure you want to remove ${userText} from this chat?`,
       [
         { text: 'Cancel', style: 'cancel' },
         { text: 'OK', onPress: onConfirmRemoveUser },
       ],
       { cancelable: true },
     );
   }, [onConfirmRemoveUser, userText]);
 }
 
 function useOnChangeRole(
   route: TooltipRoute<'ThreadSettingsMemberTooltipModal'>,
   navigation: AppNavigationProp<'ThreadSettingsMemberTooltipModal'>,
 ) {
   const { threadInfo, memberInfo } = route.params;
   return React.useCallback(() => {
     navigation.navigate<'ChangeRolesScreen'>({
       name: ChangeRolesScreenRouteName,
       params: {
         threadInfo,
         memberInfo,
         role: memberInfo.role,
       },
       key: route.key,
     });
   }, [navigation, route.key, threadInfo, memberInfo]);
 }
 
 function TooltipMenu(
   props: TooltipMenuProps<'ThreadSettingsMemberTooltipModal'>,
 ): React.Node {
   const { route, navigation, tooltipItem: TooltipItem } = props;
 
   const onChangeRole = useOnChangeRole(route, navigation);
   const onRemoveUser = useOnRemoveUser(route);
 
   return (
     <>
       <TooltipItem
         id="change_role"
         text="Change role"
         onPress={onChangeRole}
         key="change_role"
       />
       <TooltipItem
         id="remove_user"
         text="Remove user"
         onPress={onRemoveUser}
         key="remove_user"
       />
     </>
   );
 }
 
 const ThreadSettingsMemberTooltipModal: React.ComponentType<
   BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>,
 > = createTooltip<'ThreadSettingsMemberTooltipModal'>(
   ThreadSettingsMemberTooltipButton,
   TooltipMenu,
 );
 
 export default ThreadSettingsMemberTooltipModal;
diff --git a/native/chat/settings/thread-settings-member.react.js b/native/chat/settings/thread-settings-member.react.js
index 5413005ab..cab3f8b40 100644
--- a/native/chat/settings/thread-settings-member.react.js
+++ b/native/chat/settings/thread-settings-member.react.js
@@ -1,306 +1,303 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 import {
   View,
   Text,
   Platform,
   ActivityIndicator,
   TouchableOpacity,
 } from 'react-native';
 
 import {
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { getAvailableThreadMemberActions } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import {
   type ThreadInfo,
-  type LegacyRelativeMemberInfo,
+  type RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import type { ThreadSettingsNavigate } from './thread-settings.react.js';
 import UserAvatar from '../../avatars/user-avatar.react.js';
 import PencilIcon from '../../components/pencil-icon.react.js';
 import SingleLine from '../../components/single-line.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../../keyboard/keyboard-state.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../../navigation/overlay-context.js';
 import { ThreadSettingsMemberTooltipModalRouteName } from '../../navigation/route-names.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import { type Colors, useColors, useStyles } from '../../themes/colors.js';
 import type { VerticalBounds } from '../../types/layout-types.js';
 import { useNavigateToUserProfileBottomSheet } from '../../user-profile/user-profile-utils.js';
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelForeground',
     flex: 1,
     paddingHorizontal: 24,
     paddingVertical: 8,
   },
   editButton: {
     paddingLeft: 10,
   },
   topBorder: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   lastContainer: {
     paddingBottom: Platform.OS === 'ios' ? 12 : 10,
   },
   role: {
     color: 'panelForegroundTertiaryLabel',
     flex: 1,
     fontSize: 14,
     paddingTop: 4,
   },
   row: {
     flex: 1,
     flexDirection: 'row',
   },
   userInfoContainer: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
   },
   username: {
     color: 'panelForegroundSecondaryLabel',
     flex: 1,
     fontSize: 16,
     lineHeight: 20,
     marginLeft: 8,
   },
   anonymous: {
     color: 'panelForegroundTertiaryLabel',
     fontStyle: 'italic',
   },
 };
 
 type BaseProps = {
-  +memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +canEdit: boolean,
   +navigate: ThreadSettingsNavigate,
   +firstListItem: boolean,
   +lastListItem: boolean,
   +verticalBounds: ?VerticalBounds,
   +threadSettingsRouteKey: string,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +roleName: ?string,
   +removeUserLoadingStatus: LoadingStatus,
   +changeRoleLoadingStatus: LoadingStatus,
   +colors: Colors,
   +styles: $ReadOnly<typeof unboundStyles>,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   +navigateToUserProfileBottomSheet: (userID: string) => mixed,
 };
 class ThreadSettingsMember extends React.PureComponent<Props> {
   editButton: ?React.ElementRef<typeof View>;
 
   render(): React.Node {
     const userText = stringForUser(this.props.memberInfo);
 
     let usernameInfo = null;
     if (this.props.memberInfo.username) {
       usernameInfo = (
         <SingleLine style={this.props.styles.username}>{userText}</SingleLine>
       );
     } else {
       usernameInfo = (
         <SingleLine
           style={[this.props.styles.username, this.props.styles.anonymous]}
         >
           {userText}
         </SingleLine>
       );
     }
 
     let editButton = null;
     if (
       this.props.removeUserLoadingStatus === 'loading' ||
       this.props.changeRoleLoadingStatus === 'loading'
     ) {
       editButton = (
         <ActivityIndicator
           size="small"
           color={this.props.colors.panelForegroundSecondaryLabel}
         />
       );
     } else if (
       getAvailableThreadMemberActions(
         this.props.memberInfo,
         this.props.threadInfo,
         this.props.canEdit,
       ).length !== 0
     ) {
       editButton = (
         <TouchableOpacity
           onPress={this.onPressEdit}
           style={this.props.styles.editButton}
         >
           <View onLayout={this.onEditButtonLayout} ref={this.editButtonRef}>
             <PencilIcon />
           </View>
         </TouchableOpacity>
       );
     }
 
     const roleInfo = (
       <View style={this.props.styles.row}>
         <Text style={this.props.styles.role} numberOfLines={1}>
           {this.props.roleName}
         </Text>
       </View>
     );
 
     const firstItem = this.props.firstListItem
       ? null
       : this.props.styles.topBorder;
     const lastItem = this.props.lastListItem
       ? this.props.styles.lastContainer
       : null;
     return (
       <TouchableOpacity
         onPress={this.onPressUser}
         style={[this.props.styles.container, firstItem, lastItem]}
       >
         <View style={this.props.styles.row}>
           <View style={this.props.styles.userInfoContainer}>
             <UserAvatar size="S" userID={this.props.memberInfo.id} />
             {usernameInfo}
           </View>
           {editButton}
         </View>
         {roleInfo}
       </TouchableOpacity>
     );
   }
 
   onPressUser = () => {
     this.props.navigateToUserProfileBottomSheet(this.props.memberInfo.id);
   };
 
   editButtonRef = (editButton: ?React.ElementRef<typeof View>) => {
     this.editButton = editButton;
   };
 
   onEditButtonLayout = () => {};
 
   onPressEdit = () => {
     if (this.dismissKeyboardIfShowing()) {
       return;
     }
 
     const {
       editButton,
       props: { verticalBounds },
     } = this;
     if (!editButton || !verticalBounds) {
       return;
     }
 
     const { overlayContext } = this.props;
     invariant(
       overlayContext,
       'ThreadSettingsMember should have OverlayContext',
     );
     overlayContext.setScrollBlockingModalStatus('open');
 
     editButton.measure((x, y, width, height, pageX, pageY) => {
       const coordinates = { x: pageX, y: pageY, width, height };
       this.props.navigate<'ThreadSettingsMemberTooltipModal'>({
         name: ThreadSettingsMemberTooltipModalRouteName,
         params: {
           presentedFrom: this.props.threadSettingsRouteKey,
           initialCoordinates: coordinates,
           verticalBounds,
           visibleEntryIDs: getAvailableThreadMemberActions(
             this.props.memberInfo,
             this.props.threadInfo,
             this.props.canEdit,
           ),
           memberInfo: this.props.memberInfo,
           threadInfo: this.props.threadInfo,
         },
       });
     });
   };
 
   dismissKeyboardIfShowing = (): boolean => {
     const { keyboardState } = this.props;
     return !!(keyboardState && keyboardState.dismissKeyboardIfShowing());
   };
 }
 
 const ConnectedThreadSettingsMember: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettingsMember(
     props: BaseProps,
   ) {
     const memberID = props.memberInfo.id;
     const removeUserLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         removeUsersFromThreadActionTypes,
         `${removeUsersFromThreadActionTypes.started}:${memberID}`,
       )(state),
     );
     const changeRoleLoadingStatus = useSelector(state =>
       createLoadingStatusSelector(
         changeThreadMemberRolesActionTypes,
         `${changeThreadMemberRolesActionTypes.started}:${memberID}`,
       )(state),
     );
 
     const [memberInfo] = useENSNames([props.memberInfo]);
 
     const colors = useColors();
     const styles = useStyles(unboundStyles);
     const keyboardState = React.useContext(KeyboardContext);
     const overlayContext = React.useContext(OverlayContext);
 
     const navigateToUserProfileBottomSheet =
       useNavigateToUserProfileBottomSheet();
 
     const roles = useRolesFromCommunityThreadInfo(props.threadInfo, [
       props.memberInfo,
     ]);
     const roleName = roles.get(props.memberInfo.id)?.name;
 
     return (
       <ThreadSettingsMember
         {...props}
         memberInfo={memberInfo}
         roleName={roleName}
         removeUserLoadingStatus={removeUserLoadingStatus}
         changeRoleLoadingStatus={changeRoleLoadingStatus}
         colors={colors}
         styles={styles}
         keyboardState={keyboardState}
         overlayContext={overlayContext}
         navigateToUserProfileBottomSheet={navigateToUserProfileBottomSheet}
       />
     );
   });
 
 export default ConnectedThreadSettingsMember;
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
index 1396cdb17..33294cf94 100644
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -1,1303 +1,1298 @@
 // @flow
 
 import type {
   TabNavigationState,
   BottomTabOptions,
   BottomTabNavigationEventMap,
 } from '@react-navigation/core';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import { FlatList } from 'react-native-gesture-handler';
 import { createSelector } from 'reselect';
 import tinycolor from 'tinycolor2';
 
 import {
   changeThreadSettingsActionTypes,
   leaveThreadActionTypes,
   removeUsersFromThreadActionTypes,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { usePromoteSidebar } from 'lib/hooks/promote-sidebar.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import {
   threadInfoSelector,
   childThreadInfos,
 } from 'lib/selectors/thread-selectors.js';
 import { getAvailableRelationshipButtons } from 'lib/shared/relationship-utils.js';
 import {
   threadHasPermission,
   viewerIsMember,
   threadInChatList,
   getSingleOtherUser,
   threadIsChannel,
 } from 'lib/shared/thread-utils.js';
 import threadWatcher from 'lib/shared/thread-watcher.js';
 import type {
-  MinimallyEncodedRelativeMemberInfo,
   MinimallyEncodedResolvedThreadInfo,
   MinimallyEncodedThreadInfo,
 } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type { RelationshipButton } from 'lib/types/relationship-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
 import { threadTypes } from 'lib/types/thread-types-enum.js';
 import {
   type ThreadInfo,
   type ResolvedThreadInfo,
-  type LegacyRelativeMemberInfo,
+  type RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 import type { UserInfos } from 'lib/types/user-types.js';
 import {
   useResolvedThreadInfo,
   useResolvedOptionalThreadInfo,
   useResolvedOptionalThreadInfos,
 } from 'lib/utils/entity-helpers.js';
 
 import ThreadSettingsAvatar from './thread-settings-avatar.react.js';
 import type { CategoryType } from './thread-settings-category.react.js';
 import {
   ThreadSettingsCategoryHeader,
   ThreadSettingsCategoryActionHeader,
   ThreadSettingsCategoryFooter,
 } from './thread-settings-category.react.js';
 import ThreadSettingsChildThread from './thread-settings-child-thread.react.js';
 import ThreadSettingsColor from './thread-settings-color.react.js';
 import ThreadSettingsDeleteThread from './thread-settings-delete-thread.react.js';
 import ThreadSettingsDescription from './thread-settings-description.react.js';
 import ThreadSettingsEditRelationship from './thread-settings-edit-relationship.react.js';
 import ThreadSettingsHomeNotifs from './thread-settings-home-notifs.react.js';
 import ThreadSettingsLeaveThread from './thread-settings-leave-thread.react.js';
 import {
   ThreadSettingsSeeMore,
   ThreadSettingsAddMember,
   ThreadSettingsAddSubchannel,
 } from './thread-settings-list-action.react.js';
 import ThreadSettingsMediaGallery from './thread-settings-media-gallery.react.js';
 import ThreadSettingsMember from './thread-settings-member.react.js';
 import ThreadSettingsName from './thread-settings-name.react.js';
 import ThreadSettingsParent from './thread-settings-parent.react.js';
 import ThreadSettingsPromoteSidebar from './thread-settings-promote-sidebar.react.js';
 import ThreadSettingsPushNotifs from './thread-settings-push-notifs.react.js';
 import ThreadSettingsVisibility from './thread-settings-visibility.react.js';
 import ThreadAncestors from '../../components/thread-ancestors.react.js';
 import {
   type KeyboardState,
   KeyboardContext,
 } from '../../keyboard/keyboard-state.js';
 import { defaultStackScreenOptions } from '../../navigation/options.js';
 import {
   OverlayContext,
   type OverlayContextType,
 } from '../../navigation/overlay-context.js';
 import {
   AddUsersModalRouteName,
   ComposeSubchannelModalRouteName,
   FullScreenThreadMediaGalleryRouteName,
   type ScreenParamList,
   type NavigationRoute,
 } from '../../navigation/route-names.js';
 import type { TabNavigationProp } from '../../navigation/tab-navigator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
 import type { AppState } from '../../redux/state-types.js';
 import {
   useStyles,
   type IndicatorStyle,
   useIndicatorStyle,
 } from '../../themes/colors.js';
 import type { VerticalBounds } from '../../types/layout-types.js';
 import type { ViewStyle } from '../../types/styles.js';
 import type { ChatNavigationProp } from '../chat.react.js';
 
 const itemPageLength = 5;
 
 export type ThreadSettingsParams = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 export type ThreadSettingsNavigate = $PropertyType<
   ChatNavigationProp<'ThreadSettings'>,
   'navigate',
 >;
 
 type ChatSettingsItem =
   | {
       +itemType: 'header',
       +key: string,
       +title: string,
       +categoryType: CategoryType,
     }
   | {
       +itemType: 'actionHeader',
       +key: string,
       +title: string,
       +actionText: string,
       +onPress: () => void,
     }
   | {
       +itemType: 'footer',
       +key: string,
       +categoryType: CategoryType,
     }
   | {
       +itemType: 'avatar',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'name',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +nameEditValue: ?string,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'color',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +colorEditValue: string,
       +canChangeSettings: boolean,
       +navigate: ThreadSettingsNavigate,
       +threadSettingsRouteKey: string,
     }
   | {
       +itemType: 'description',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +descriptionEditValue: ?string,
       +descriptionTextHeight: ?number,
       +canChangeSettings: boolean,
     }
   | {
       +itemType: 'parent',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +parentThreadInfo:
         | ?ResolvedThreadInfo
         | ?MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'visibility',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'pushNotifs',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'homeNotifs',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
     }
   | {
       +itemType: 'seeMore',
       +key: string,
       +onPress: () => void,
     }
   | {
       +itemType: 'childThread',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +firstListItem: boolean,
       +lastListItem: boolean,
     }
   | {
       +itemType: 'addSubchannel',
       +key: string,
     }
   | {
       +itemType: 'member',
       +key: string,
-      +memberInfo:
-        | LegacyRelativeMemberInfo
-        | MinimallyEncodedRelativeMemberInfo,
+      +memberInfo: RelativeMemberInfo,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +canEdit: boolean,
       +navigate: ThreadSettingsNavigate,
       +firstListItem: boolean,
       +lastListItem: boolean,
       +verticalBounds: ?VerticalBounds,
       +threadSettingsRouteKey: string,
     }
   | {
       +itemType: 'addMember',
       +key: string,
     }
   | {
       +itemType: 'mediaGallery',
       +key: string,
       +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
       +limit: number,
       +verticalBounds: ?VerticalBounds,
     }
   | {
       +itemType: 'promoteSidebar' | 'leaveThread' | 'deleteThread',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +navigate: ThreadSettingsNavigate,
       +buttonStyle: ViewStyle,
     }
   | {
       +itemType: 'editRelationship',
       +key: string,
       +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
       +navigate: ThreadSettingsNavigate,
       +buttonStyle: ViewStyle,
       +relationshipButton: RelationshipButton,
     };
 
 const unboundStyles = {
   container: {
     backgroundColor: 'panelBackground',
     flex: 1,
   },
   flatList: {
     paddingVertical: 16,
   },
   nonTopButton: {
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
   },
   lastButton: {
     paddingBottom: Platform.OS === 'ios' ? 14 : 12,
   },
 };
 
 type BaseProps = {
   +navigation: ChatNavigationProp<'ThreadSettings'>,
   +route: NavigationRoute<'ThreadSettings'>,
 };
 type Props = {
   ...BaseProps,
   // Redux state
   +userInfos: UserInfos,
   +viewerID: ?string,
   +threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
   +parentThreadInfo: ?ResolvedThreadInfo | ?MinimallyEncodedResolvedThreadInfo,
   +childThreadInfos: ?$ReadOnlyArray<ResolvedThreadInfo>,
   +somethingIsSaving: boolean,
   +styles: $ReadOnly<typeof unboundStyles>,
   +indicatorStyle: IndicatorStyle,
   // withOverlayContext
   +overlayContext: ?OverlayContextType,
   // withKeyboardState
   +keyboardState: ?KeyboardState,
   +canPromoteSidebar: boolean,
 };
 type State = {
   +numMembersShowing: number,
   +numSubchannelsShowing: number,
   +numSidebarsShowing: number,
   +nameEditValue: ?string,
   +descriptionEditValue: ?string,
   +descriptionTextHeight: ?number,
   +colorEditValue: string,
   +verticalBounds: ?VerticalBounds,
 };
 type PropsAndState = { ...Props, ...State };
 class ThreadSettings extends React.PureComponent<Props, State> {
   flatListContainer: ?React.ElementRef<typeof View>;
 
   constructor(props: Props) {
     super(props);
     this.state = {
       numMembersShowing: itemPageLength,
       numSubchannelsShowing: itemPageLength,
       numSidebarsShowing: itemPageLength,
       nameEditValue: null,
       descriptionEditValue: null,
       descriptionTextHeight: null,
       colorEditValue: props.threadInfo.color,
       verticalBounds: null,
     };
   }
 
   static scrollDisabled(props: Props): boolean {
     const { overlayContext } = props;
     invariant(overlayContext, 'ThreadSettings should have OverlayContext');
     return overlayContext.scrollBlockingModalStatus !== 'closed';
   }
 
   componentDidUpdate(prevProps: Props) {
     const prevThreadInfo = prevProps.threadInfo;
     const newThreadInfo = this.props.threadInfo;
 
     if (
       !tinycolor.equals(newThreadInfo.color, prevThreadInfo.color) &&
       tinycolor.equals(this.state.colorEditValue, prevThreadInfo.color)
     ) {
       this.setState({ colorEditValue: newThreadInfo.color });
     }
 
     if (defaultStackScreenOptions.gestureEnabled) {
       const scrollIsDisabled = ThreadSettings.scrollDisabled(this.props);
       const scrollWasDisabled = ThreadSettings.scrollDisabled(prevProps);
       if (!scrollWasDisabled && scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: false });
       } else if (scrollWasDisabled && !scrollIsDisabled) {
         this.props.navigation.setOptions({ gestureEnabled: true });
       }
     }
   }
 
   threadBasicsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.parentThreadInfo,
       (propsAndState: PropsAndState) => propsAndState.nameEditValue,
       (propsAndState: PropsAndState) => propsAndState.colorEditValue,
       (propsAndState: PropsAndState) => propsAndState.descriptionEditValue,
       (propsAndState: PropsAndState) => propsAndState.descriptionTextHeight,
       (propsAndState: PropsAndState) => !propsAndState.somethingIsSaving,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.route.key,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         parentThreadInfo:
           | ?ResolvedThreadInfo
           | ?MinimallyEncodedResolvedThreadInfo,
         nameEditValue: ?string,
         colorEditValue: string,
         descriptionEditValue: ?string,
         descriptionTextHeight: ?number,
         canStartEditing: boolean,
         navigate: ThreadSettingsNavigate,
         routeKey: string,
       ) => {
         const canEditThreadAvatar = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_AVATAR,
         );
         const canEditThreadName = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_NAME,
         );
         const canEditThreadDescription = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_DESCRIPTION,
         );
         const canEditThreadColor = threadHasPermission(
           threadInfo,
           threadPermissions.EDIT_THREAD_COLOR,
         );
 
         const canChangeAvatar = canEditThreadAvatar && canStartEditing;
         const canChangeName = canEditThreadName && canStartEditing;
         const canChangeDescription =
           canEditThreadDescription && canStartEditing;
         const canChangeColor = canEditThreadColor && canStartEditing;
 
         const listData: ChatSettingsItem[] = [];
         listData.push({
           itemType: 'header',
           key: 'avatarHeader',
           title: 'Channel Avatar',
           categoryType: 'unpadded',
         });
         listData.push({
           itemType: 'avatar',
           key: 'avatar',
           threadInfo,
           canChangeSettings: canChangeAvatar,
         });
         listData.push({
           itemType: 'footer',
           key: 'avatarFooter',
           categoryType: 'outline',
         });
 
         listData.push({
           itemType: 'header',
           key: 'basicsHeader',
           title: 'Basics',
           categoryType: 'full',
         });
         listData.push({
           itemType: 'name',
           key: 'name',
           threadInfo,
           nameEditValue,
           canChangeSettings: canChangeName,
         });
         listData.push({
           itemType: 'color',
           key: 'color',
           threadInfo,
           colorEditValue,
           canChangeSettings: canChangeColor,
           navigate,
           threadSettingsRouteKey: routeKey,
         });
         listData.push({
           itemType: 'footer',
           key: 'basicsFooter',
           categoryType: 'full',
         });
 
         if (
           (descriptionEditValue !== null &&
             descriptionEditValue !== undefined) ||
           threadInfo.description ||
           canEditThreadDescription
         ) {
           listData.push({
             itemType: 'description',
             key: 'description',
             threadInfo,
             descriptionEditValue,
             descriptionTextHeight,
             canChangeSettings: canChangeDescription,
           });
         }
 
         const isMember = viewerIsMember(threadInfo);
         if (isMember) {
           listData.push({
             itemType: 'header',
             key: 'subscriptionHeader',
             title: 'Subscription',
             categoryType: 'full',
           });
           listData.push({
             itemType: 'pushNotifs',
             key: 'pushNotifs',
             threadInfo,
           });
           if (threadInfo.type !== threadTypes.SIDEBAR) {
             listData.push({
               itemType: 'homeNotifs',
               key: 'homeNotifs',
               threadInfo,
             });
           }
           listData.push({
             itemType: 'footer',
             key: 'subscriptionFooter',
             categoryType: 'full',
           });
         }
 
         listData.push({
           itemType: 'header',
           key: 'privacyHeader',
           title: 'Privacy',
           categoryType: 'full',
         });
         listData.push({
           itemType: 'visibility',
           key: 'visibility',
           threadInfo,
         });
         listData.push({
           itemType: 'parent',
           key: 'parent',
           threadInfo,
           parentThreadInfo,
         });
         listData.push({
           itemType: 'footer',
           key: 'privacyFooter',
           categoryType: 'full',
         });
         return listData;
       },
     );
 
   subchannelsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.childThreadInfos,
       (propsAndState: PropsAndState) => propsAndState.numSubchannelsShowing,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         navigate: ThreadSettingsNavigate,
         childThreads: ?$ReadOnlyArray<
           ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         >,
         numSubchannelsShowing: number,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const subchannels = childThreads?.filter(threadIsChannel) ?? [];
         const canCreateSubchannels = threadHasPermission(
           threadInfo,
           threadPermissions.CREATE_SUBCHANNELS,
         );
         if (subchannels.length === 0 && !canCreateSubchannels) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'subchannelHeader',
           title: 'Subchannels',
           categoryType: 'unpadded',
         });
 
         if (canCreateSubchannels) {
           listData.push({
             itemType: 'addSubchannel',
             key: 'addSubchannel',
           });
         }
 
         const numItems = Math.min(numSubchannelsShowing, subchannels.length);
         for (let i = 0; i < numItems; i++) {
           const subchannelInfo = subchannels[i];
           listData.push({
             itemType: 'childThread',
             key: `childThread${subchannelInfo.id}`,
             threadInfo: subchannelInfo,
             firstListItem: i === 0 && !canCreateSubchannels,
             lastListItem: i === numItems - 1 && numItems === subchannels.length,
           });
         }
 
         if (numItems < subchannels.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreSubchannels',
             onPress: this.onPressSeeMoreSubchannels,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'subchannelFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   sidebarsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.childThreadInfos,
       (propsAndState: PropsAndState) => propsAndState.numSidebarsShowing,
       (
         navigate: ThreadSettingsNavigate,
         childThreads: ?$ReadOnlyArray<
           ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         >,
         numSidebarsShowing: number,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const sidebars =
           childThreads?.filter(
             childThreadInfo => childThreadInfo.type === threadTypes.SIDEBAR,
           ) ?? [];
         if (sidebars.length === 0) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'sidebarHeader',
           title: 'Threads',
           categoryType: 'unpadded',
         });
 
         const numItems = Math.min(numSidebarsShowing, sidebars.length);
         for (let i = 0; i < numItems; i++) {
           const sidebarInfo = sidebars[i];
           listData.push({
             itemType: 'childThread',
             key: `childThread${sidebarInfo.id}`,
             threadInfo: sidebarInfo,
             firstListItem: i === 0,
             lastListItem: i === numItems - 1 && numItems === sidebars.length,
           });
         }
 
         if (numItems < sidebars.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreSidebars',
             onPress: this.onPressSeeMoreSidebars,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'sidebarFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   threadMembersListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => !propsAndState.somethingIsSaving,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.route.key,
       (propsAndState: PropsAndState) => propsAndState.numMembersShowing,
       (propsAndState: PropsAndState) => propsAndState.verticalBounds,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         canStartEditing: boolean,
         navigate: ThreadSettingsNavigate,
         routeKey: string,
         numMembersShowing: number,
         verticalBounds: ?VerticalBounds,
       ) => {
         const listData: ChatSettingsItem[] = [];
 
         const canAddMembers = threadHasPermission(
           threadInfo,
           threadPermissions.ADD_MEMBERS,
         );
         if (threadInfo.members.length === 0 && !canAddMembers) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'memberHeader',
           title: 'Members',
           categoryType: 'unpadded',
         });
 
         if (canAddMembers) {
           listData.push({
             itemType: 'addMember',
             key: 'addMember',
           });
         }
 
         const numItems = Math.min(numMembersShowing, threadInfo.members.length);
         for (let i = 0; i < numItems; i++) {
           const memberInfo = threadInfo.members[i];
           listData.push({
             itemType: 'member',
             key: `member${memberInfo.id}`,
             memberInfo,
             threadInfo,
             canEdit: canStartEditing,
             navigate,
             firstListItem: i === 0 && !canAddMembers,
             lastListItem:
               i === numItems - 1 && numItems === threadInfo.members.length,
             verticalBounds,
             threadSettingsRouteKey: routeKey,
           });
         }
 
         if (numItems < threadInfo.members.length) {
           listData.push({
             itemType: 'seeMore',
             key: 'seeMoreMembers',
             onPress: this.onPressSeeMoreMembers,
           });
         }
 
         listData.push({
           itemType: 'footer',
           key: 'memberFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   mediaGalleryListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.verticalBounds,
       (
         threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
         verticalBounds: ?VerticalBounds,
       ) => {
         const listData: ChatSettingsItem[] = [];
         const limit = 6;
 
         listData.push({
           itemType: 'actionHeader',
           key: 'mediaGalleryHeader',
           title: 'Media Gallery',
           actionText: 'See more',
           onPress: this.onPressSeeMoreMediaGallery,
         });
 
         listData.push({
           itemType: 'mediaGallery',
           key: 'mediaGallery',
           threadInfo,
           limit,
           verticalBounds,
         });
 
         listData.push({
           itemType: 'footer',
           key: 'mediaGalleryFooter',
           categoryType: 'outline',
         });
 
         return listData;
       },
     );
 
   actionsListDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       (propsAndState: PropsAndState) => propsAndState.threadInfo,
       (propsAndState: PropsAndState) => propsAndState.parentThreadInfo,
       (propsAndState: PropsAndState) => propsAndState.navigation.navigate,
       (propsAndState: PropsAndState) => propsAndState.styles,
       (propsAndState: PropsAndState) => propsAndState.userInfos,
       (propsAndState: PropsAndState) => propsAndState.viewerID,
       (
         threadInfo: ResolvedThreadInfo | MinimallyEncodedResolvedThreadInfo,
         parentThreadInfo:
           | ?ResolvedThreadInfo
           | ?MinimallyEncodedResolvedThreadInfo,
         navigate: ThreadSettingsNavigate,
         styles: $ReadOnly<typeof unboundStyles>,
         userInfos: UserInfos,
         viewerID: ?string,
       ) => {
         const buttons = [];
 
         if (this.props.canPromoteSidebar) {
           buttons.push({
             itemType: 'promoteSidebar',
             key: 'promoteSidebar',
             threadInfo,
             navigate,
           });
         }
 
         const canLeaveThread = threadHasPermission(
           threadInfo,
           threadPermissions.LEAVE_THREAD,
         );
 
         if (viewerIsMember(threadInfo) && canLeaveThread) {
           buttons.push({
             itemType: 'leaveThread',
             key: 'leaveThread',
             threadInfo,
             navigate,
           });
         }
 
         const canDeleteThread = threadHasPermission(
           threadInfo,
           threadPermissions.DELETE_THREAD,
         );
         if (canDeleteThread) {
           buttons.push({
             itemType: 'deleteThread',
             key: 'deleteThread',
             threadInfo,
             navigate,
           });
         }
 
         const threadIsPersonal = threadInfo.type === threadTypes.PERSONAL;
         if (threadIsPersonal && viewerID) {
           const otherMemberID = getSingleOtherUser(threadInfo, viewerID);
           if (otherMemberID) {
             const otherUserInfo = userInfos[otherMemberID];
             const availableRelationshipActions =
               getAvailableRelationshipButtons(otherUserInfo);
 
             for (const action of availableRelationshipActions) {
               buttons.push({
                 itemType: 'editRelationship',
                 key: action,
                 threadInfo,
                 navigate,
                 relationshipButton: action,
               });
             }
           }
         }
 
         const listData: ChatSettingsItem[] = [];
         if (buttons.length === 0) {
           return listData;
         }
 
         listData.push({
           itemType: 'header',
           key: 'actionsHeader',
           title: 'Actions',
           categoryType: 'unpadded',
         });
         for (let i = 0; i < buttons.length; i++) {
           // Necessary for Flow...
           if (buttons[i].itemType === 'editRelationship') {
             listData.push({
               ...buttons[i],
               buttonStyle: [
                 i === 0 ? null : styles.nonTopButton,
                 i === buttons.length - 1 ? styles.lastButton : null,
               ],
             });
           } else {
             listData.push({
               ...buttons[i],
               buttonStyle: [
                 i === 0 ? null : styles.nonTopButton,
                 i === buttons.length - 1 ? styles.lastButton : null,
               ],
             });
           }
         }
         listData.push({
           itemType: 'footer',
           key: 'actionsFooter',
           categoryType: 'unpadded',
         });
 
         return listData;
       },
     );
 
   listDataSelector: PropsAndState => $ReadOnlyArray<ChatSettingsItem> =
     createSelector(
       this.threadBasicsListDataSelector,
       this.subchannelsListDataSelector,
       this.sidebarsListDataSelector,
       this.threadMembersListDataSelector,
       this.mediaGalleryListDataSelector,
       this.actionsListDataSelector,
       (
         threadBasicsListData: $ReadOnlyArray<ChatSettingsItem>,
         subchannelsListData: $ReadOnlyArray<ChatSettingsItem>,
         sidebarsListData: $ReadOnlyArray<ChatSettingsItem>,
         threadMembersListData: $ReadOnlyArray<ChatSettingsItem>,
         mediaGalleryListData: $ReadOnlyArray<ChatSettingsItem>,
         actionsListData: $ReadOnlyArray<ChatSettingsItem>,
       ) => [
         ...threadBasicsListData,
         ...subchannelsListData,
         ...sidebarsListData,
         ...threadMembersListData,
         ...mediaGalleryListData,
         ...actionsListData,
       ],
     );
 
   get listData(): $ReadOnlyArray<ChatSettingsItem> {
     return this.listDataSelector({ ...this.props, ...this.state });
   }
 
   render(): React.Node {
     return (
       <View
         style={this.props.styles.container}
         ref={this.flatListContainerRef}
         onLayout={this.onFlatListContainerLayout}
       >
         <ThreadAncestors threadInfo={this.props.threadInfo} />
         <FlatList
           data={this.listData}
           contentContainerStyle={this.props.styles.flatList}
           renderItem={this.renderItem}
           scrollEnabled={!ThreadSettings.scrollDisabled(this.props)}
           indicatorStyle={this.props.indicatorStyle}
           initialNumToRender={20}
         />
       </View>
     );
   }
 
   flatListContainerRef = (
     flatListContainer: ?React.ElementRef<typeof View>,
   ) => {
     this.flatListContainer = flatListContainer;
   };
 
   onFlatListContainerLayout = () => {
     const { flatListContainer } = this;
     if (!flatListContainer) {
       return;
     }
 
     const { keyboardState } = this.props;
     if (!keyboardState || keyboardState.keyboardShowing) {
       return;
     }
 
     flatListContainer.measure((x, y, width, height, pageX, pageY) => {
       if (
         height === null ||
         height === undefined ||
         pageY === null ||
         pageY === undefined
       ) {
         return;
       }
       this.setState({ verticalBounds: { height, y: pageY } });
     });
   };
 
   // ESLint doesn't recognize that invariant always throws
   // eslint-disable-next-line consistent-return
   renderItem = (row: { +item: ChatSettingsItem, ... }): React.Node => {
     const item = row.item;
     if (item.itemType === 'header') {
       return (
         <ThreadSettingsCategoryHeader
           type={item.categoryType}
           title={item.title}
         />
       );
     } else if (item.itemType === 'actionHeader') {
       return (
         <ThreadSettingsCategoryActionHeader
           title={item.title}
           actionText={item.actionText}
           onPress={item.onPress}
         />
       );
     } else if (item.itemType === 'footer') {
       return <ThreadSettingsCategoryFooter type={item.categoryType} />;
     } else if (item.itemType === 'avatar') {
       return (
         <ThreadSettingsAvatar
           threadInfo={item.threadInfo}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'name') {
       return (
         <ThreadSettingsName
           threadInfo={item.threadInfo}
           nameEditValue={item.nameEditValue}
           setNameEditValue={this.setNameEditValue}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'color') {
       return (
         <ThreadSettingsColor
           threadInfo={item.threadInfo}
           colorEditValue={item.colorEditValue}
           setColorEditValue={this.setColorEditValue}
           canChangeSettings={item.canChangeSettings}
           navigate={item.navigate}
           threadSettingsRouteKey={item.threadSettingsRouteKey}
         />
       );
     } else if (item.itemType === 'description') {
       return (
         <ThreadSettingsDescription
           threadInfo={item.threadInfo}
           descriptionEditValue={item.descriptionEditValue}
           setDescriptionEditValue={this.setDescriptionEditValue}
           descriptionTextHeight={item.descriptionTextHeight}
           setDescriptionTextHeight={this.setDescriptionTextHeight}
           canChangeSettings={item.canChangeSettings}
         />
       );
     } else if (item.itemType === 'parent') {
       return (
         <ThreadSettingsParent
           threadInfo={item.threadInfo}
           parentThreadInfo={item.parentThreadInfo}
         />
       );
     } else if (item.itemType === 'visibility') {
       return <ThreadSettingsVisibility threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'pushNotifs') {
       return <ThreadSettingsPushNotifs threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'homeNotifs') {
       return <ThreadSettingsHomeNotifs threadInfo={item.threadInfo} />;
     } else if (item.itemType === 'seeMore') {
       return <ThreadSettingsSeeMore onPress={item.onPress} />;
     } else if (item.itemType === 'childThread') {
       return (
         <ThreadSettingsChildThread
           threadInfo={item.threadInfo}
           firstListItem={item.firstListItem}
           lastListItem={item.lastListItem}
         />
       );
     } else if (item.itemType === 'addSubchannel') {
       return (
         <ThreadSettingsAddSubchannel onPress={this.onPressComposeSubchannel} />
       );
     } else if (item.itemType === 'member') {
       return (
         <ThreadSettingsMember
           memberInfo={item.memberInfo}
           threadInfo={item.threadInfo}
           canEdit={item.canEdit}
           navigate={item.navigate}
           firstListItem={item.firstListItem}
           lastListItem={item.lastListItem}
           verticalBounds={item.verticalBounds}
           threadSettingsRouteKey={item.threadSettingsRouteKey}
         />
       );
     } else if (item.itemType === 'addMember') {
       return <ThreadSettingsAddMember onPress={this.onPressAddMember} />;
     } else if (item.itemType === 'mediaGallery') {
       return (
         <ThreadSettingsMediaGallery
           threadID={item.threadInfo.id}
           limit={item.limit}
           verticalBounds={item.verticalBounds}
         />
       );
     } else if (item.itemType === 'leaveThread') {
       return (
         <ThreadSettingsLeaveThread
           threadInfo={item.threadInfo}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'deleteThread') {
       return (
         <ThreadSettingsDeleteThread
           threadInfo={item.threadInfo}
           navigate={item.navigate}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'promoteSidebar') {
       return (
         <ThreadSettingsPromoteSidebar
           threadInfo={item.threadInfo}
           buttonStyle={item.buttonStyle}
         />
       );
     } else if (item.itemType === 'editRelationship') {
       return (
         <ThreadSettingsEditRelationship
           threadInfo={item.threadInfo}
           relationshipButton={item.relationshipButton}
           buttonStyle={item.buttonStyle}
         />
       );
     } else {
       invariant(false, `unexpected ThreadSettings item type ${item.itemType}`);
     }
   };
 
   setNameEditValue = (value: ?string, callback?: () => void) => {
     this.setState({ nameEditValue: value }, callback);
   };
 
   setColorEditValue = (color: string) => {
     this.setState({ colorEditValue: color });
   };
 
   setDescriptionEditValue = (value: ?string, callback?: () => void) => {
     this.setState({ descriptionEditValue: value }, callback);
   };
 
   setDescriptionTextHeight = (height: number) => {
     this.setState({ descriptionTextHeight: height });
   };
 
   onPressComposeSubchannel = () => {
     this.props.navigation.navigate(ComposeSubchannelModalRouteName, {
       presentedFrom: this.props.route.key,
       threadInfo: this.props.threadInfo,
     });
   };
 
   onPressAddMember = () => {
     this.props.navigation.navigate(AddUsersModalRouteName, {
       presentedFrom: this.props.route.key,
       threadInfo: this.props.threadInfo,
     });
   };
 
   onPressSeeMoreMembers = () => {
     this.setState(prevState => ({
       numMembersShowing: prevState.numMembersShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreSubchannels = () => {
     this.setState(prevState => ({
       numSubchannelsShowing: prevState.numSubchannelsShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreSidebars = () => {
     this.setState(prevState => ({
       numSidebarsShowing: prevState.numSidebarsShowing + itemPageLength,
     }));
   };
 
   onPressSeeMoreMediaGallery = () => {
     this.props.navigation.navigate(FullScreenThreadMediaGalleryRouteName, {
       threadInfo: this.props.threadInfo,
     });
   };
 }
 
 const threadMembersChangeIsSaving = (
   state: AppState,
-  threadMembers: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
 ) => {
   for (const threadMember of threadMembers) {
     const removeUserLoadingStatus = createLoadingStatusSelector(
       removeUsersFromThreadActionTypes,
       `${removeUsersFromThreadActionTypes.started}:${threadMember.id}`,
     )(state);
     if (removeUserLoadingStatus === 'loading') {
       return true;
     }
     const changeRoleLoadingStatus = createLoadingStatusSelector(
       changeThreadMemberRolesActionTypes,
       `${changeThreadMemberRolesActionTypes.started}:${threadMember.id}`,
     )(state);
     if (changeRoleLoadingStatus === 'loading') {
       return true;
     }
   }
   return false;
 };
 
 const ConnectedThreadSettings: React.ComponentType<BaseProps> =
   React.memo<BaseProps>(function ConnectedThreadSettings(props: BaseProps) {
     const userInfos = useSelector(state => state.userStore.userInfos);
     const viewerID = useSelector(
       state => state.currentUserInfo && state.currentUserInfo.id,
     );
     const threadID = props.route.params.threadInfo.id;
 
     const reduxThreadInfo: ?ThreadInfo = useSelector(
       state => threadInfoSelector(state)[threadID],
     );
     React.useEffect(() => {
       invariant(
         reduxThreadInfo,
         'ReduxThreadInfo should exist when ThreadSettings is opened',
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
     const { setParams } = props.navigation;
     React.useEffect(() => {
       if (reduxThreadInfo) {
         setParams({ threadInfo: reduxThreadInfo });
       }
     }, [reduxThreadInfo, setParams]);
     const threadInfo: ThreadInfo | MinimallyEncodedThreadInfo =
       reduxThreadInfo ?? props.route.params.threadInfo;
     const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
 
     React.useEffect(() => {
       if (threadInChatList(threadInfo)) {
         return undefined;
       }
       threadWatcher.watchID(threadInfo.id);
       return () => {
         threadWatcher.removeID(threadInfo.id);
       };
     }, [threadInfo]);
 
     const parentThreadID = threadInfo.parentThreadID;
     const parentThreadInfo: ?ThreadInfo = useSelector(state =>
       parentThreadID ? threadInfoSelector(state)[parentThreadID] : null,
     );
     const resolvedParentThreadInfo =
       useResolvedOptionalThreadInfo(parentThreadInfo);
     const threadMembers = threadInfo.members;
     const boundChildThreadInfos = useSelector(
       state => childThreadInfos(state)[threadID],
     );
     const resolvedChildThreadInfos = useResolvedOptionalThreadInfos(
       boundChildThreadInfos,
     );
 
     const somethingIsSaving = useSelector(state => {
       const editNameLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:name`,
       )(state);
 
       const editColorLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:color`,
       )(state);
 
       const editDescriptionLoadingStatus = createLoadingStatusSelector(
         changeThreadSettingsActionTypes,
         `${changeThreadSettingsActionTypes.started}:${threadID}:description`,
       )(state);
 
       const leaveThreadLoadingStatus = createLoadingStatusSelector(
         leaveThreadActionTypes,
         `${leaveThreadActionTypes.started}:${threadID}`,
       )(state);
 
       const boundThreadMembersChangeIsSaving = threadMembersChangeIsSaving(
         state,
         threadMembers,
       );
 
       return (
         boundThreadMembersChangeIsSaving ||
         editNameLoadingStatus === 'loading' ||
         editColorLoadingStatus === 'loading' ||
         editDescriptionLoadingStatus === 'loading' ||
         leaveThreadLoadingStatus === 'loading'
       );
     });
 
     const { navigation } = props;
     React.useEffect(() => {
       const tabNavigation = navigation.getParent<
         ScreenParamList,
         'Chat',
         TabNavigationState,
         BottomTabOptions,
         BottomTabNavigationEventMap,
         TabNavigationProp<'Chat'>,
       >();
       invariant(tabNavigation, 'ChatNavigator should be within TabNavigator');
 
       const onTabPress = () => {
         if (navigation.isFocused() && !somethingIsSaving) {
           navigation.popToTop();
         }
       };
 
       tabNavigation.addListener('tabPress', onTabPress);
       return () => tabNavigation.removeListener('tabPress', onTabPress);
     }, [navigation, somethingIsSaving]);
 
     const styles = useStyles(unboundStyles);
     const indicatorStyle = useIndicatorStyle();
     const overlayContext = React.useContext(OverlayContext);
     const keyboardState = React.useContext(KeyboardContext);
     const { canPromoteSidebar } = usePromoteSidebar(threadInfo);
 
     return (
       <ThreadSettings
         {...props}
         userInfos={userInfos}
         viewerID={viewerID}
         threadInfo={resolvedThreadInfo}
         parentThreadInfo={resolvedParentThreadInfo}
         childThreadInfos={resolvedChildThreadInfos}
         somethingIsSaving={somethingIsSaving}
         styles={styles}
         indicatorStyle={indicatorStyle}
         overlayContext={overlayContext}
         keyboardState={keyboardState}
         canPromoteSidebar={canPromoteSidebar}
       />
     );
   });
 
 export default ConnectedThreadSettings;
diff --git a/native/markdown/rules.react.js b/native/markdown/rules.react.js
index ca50e99d2..12dd1688a 100644
--- a/native/markdown/rules.react.js
+++ b/native/markdown/rules.react.js
@@ -1,454 +1,449 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import { Text, View, Platform } from 'react-native';
 import * as SimpleMarkdown from 'simple-markdown';
 
 import * as SharedMarkdown from 'lib/shared/markdown.js';
 import { chatMentionRegex } from 'lib/shared/mention-utils.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
   ThreadInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 
 import MarkdownChatMention from './markdown-chat-mention.react.js';
 import MarkdownLink from './markdown-link.react.js';
 import MarkdownParagraph from './markdown-paragraph.react.js';
 import MarkdownSpoiler from './markdown-spoiler.react.js';
 import MarkdownUserMention from './markdown-user-mention.react.js';
 import { getMarkdownStyles } from './styles.js';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
   +emojiOnlyFactor: ?number,
   // We need to use a Text container for Entry because it needs to match up
   // exactly with TextInput. However, if we use a Text container, we can't
   // support styles for things like blockQuote, which rely on rendering as a
   // View, and Views can't be nested inside Texts without explicit height and
   // width
   +container: 'View' | 'Text',
 };
 
 // Entry requires a seamless transition between Markdown and TextInput
 // components, so we can't do anything that would change the position of text
 const inlineMarkdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light');
   const simpleMarkdownRules = {
     // Matches 'https://google.com' during parse phase and returns a 'link' node
     url: {
       ...SimpleMarkdown.defaultRules.url,
       // simple-markdown is case-sensitive, but we don't want to be
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.urlRegex),
     },
     // Matches '[Google](https://google.com)' during parse phase and handles
     // rendering all 'link' nodes, including for 'autolink' and 'url'
     link: {
       ...SimpleMarkdown.defaultRules.link,
       match: () => null,
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         return (
           <MarkdownLink
             key={state.key}
             style={styles.link}
             target={node.target}
           >
             {output(node.content, state)}
           </MarkdownLink>
         );
       },
     },
     // Each line gets parsed into a 'paragraph' node. The AST returned by the
     // parser will be an array of one or more 'paragraph' nodes
     paragraph: {
       ...SimpleMarkdown.defaultRules.paragraph,
       // simple-markdown's default RegEx collapses multiple newlines into one.
       // We want to keep the newlines, but when rendering within a View, we
       // strip just one trailing newline off, since the View adds vertical
       // spacing between its children
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         } else if (state.container === 'View') {
           return SharedMarkdown.paragraphStripTrailingNewlineRegex.exec(source);
         } else {
           return SharedMarkdown.paragraphRegex.exec(source);
         }
       },
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         let content = capture[1];
         if (state.container === 'View') {
           // React Native renders empty lines with less height. We want to
           // preserve the newline characters, so we replace empty lines with a
           // single space
           content = content.replace(/^$/m, ' ');
         }
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownParagraph key={state.key} style={state.textStyle}>
           {output(node.content, state)}
         </MarkdownParagraph>
       ),
     },
     // This is the leaf node in the AST returned by the parse phase
     text: SimpleMarkdown.defaultRules.text,
   };
   return {
     simpleMarkdownRules,
     emojiOnlyFactor: null,
     container: 'Text',
   };
 });
 
 // We allow the most markdown features for TextMessage, which doesn't have the
 // same requirements as Entry
 const fullMarkdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const styles = getMarkdownStyles(useDarkStyle ? 'dark' : 'light');
   const inlineRules = inlineMarkdownRules(useDarkStyle);
   const simpleMarkdownRules = {
     ...inlineRules.simpleMarkdownRules,
     // Matches '<https://google.com>' during parse phase and returns a 'link'
     // node
     autolink: SimpleMarkdown.defaultRules.autolink,
     // Matches '[Google](https://google.com)' during parse phase and handles
     // rendering all 'link' nodes, including for 'autolink' and 'url'
     link: {
       ...inlineRules.simpleMarkdownRules.link,
       match: SimpleMarkdown.defaultRules.link.match,
     },
     mailto: SimpleMarkdown.defaultRules.mailto,
     em: {
       ...SimpleMarkdown.defaultRules.em,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.italics}>
           {output(node.content, state)}
         </Text>
       ),
     },
     strong: {
       ...SimpleMarkdown.defaultRules.strong,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.bold}>
           {output(node.content, state)}
         </Text>
       ),
     },
     u: {
       ...SimpleMarkdown.defaultRules.u,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.underline}>
           {output(node.content, state)}
         </Text>
       ),
     },
     del: {
       ...SimpleMarkdown.defaultRules.del,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.strikethrough}>
           {output(node.content, state)}
         </Text>
       ),
     },
     spoiler: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.spoilerRegex),
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         const content = capture[1];
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownSpoiler
           key={state.key}
           spoilerIdentifier={state.key}
           text={output(node.content, state)}
         />
       ),
     },
     inlineCode: {
       ...SimpleMarkdown.defaultRules.inlineCode,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <Text key={state.key} style={styles.inlineCode}>
           {node.content}
         </Text>
       ),
     },
     heading: {
       ...SimpleMarkdown.defaultRules.heading,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.headingStripFollowingNewlineRegex,
       ),
       // eslint-disable-next-line react/display-name
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         const headingStyle = styles['h' + node.level];
         return (
           <Text key={state.key} style={[state.textStyle, headingStyle]}>
             {output(node.content, state)}
           </Text>
         );
       },
     },
     blockQuote: {
       ...SimpleMarkdown.defaultRules.blockQuote,
       // match end of blockQuote by either \n\n or end of string
       match: SharedMarkdown.matchBlockQuote(
         SharedMarkdown.blockQuoteStripFollowingNewlineRegex,
       ),
       parse: SharedMarkdown.parseBlockQuote,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => {
         const { isNestedQuote } = state;
         const backgroundColor = isNestedQuote ? '#00000000' : '#00000066';
         const borderLeftColor = (Platform.select({
           ios: '#00000066',
           default: isNestedQuote ? '#00000066' : '#000000A3',
         }): string);
 
         return (
           <View
             key={state.key}
             style={[styles.blockQuote, { backgroundColor, borderLeftColor }]}
           >
             {output(node.content, { ...state, isNestedQuote: true })}
           </View>
         );
       },
     },
     codeBlock: {
       ...SimpleMarkdown.defaultRules.codeBlock,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.codeBlockStripTrailingNewlineRegex,
       ),
       parse(capture: SharedMarkdown.Capture) {
         return {
           content: capture[1].replace(/^ {4}/gm, ''),
         };
       },
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <View key={state.key} style={styles.codeBlock}>
           <Text style={[state.textStyle, styles.codeBlockText]}>
             {node.content}
           </Text>
         </View>
       ),
     },
     fence: {
       ...SimpleMarkdown.defaultRules.fence,
       match: SimpleMarkdown.blockRegex(
         SharedMarkdown.fenceStripTrailingNewlineRegex,
       ),
       parse: (capture: SharedMarkdown.Capture) => ({
         type: 'codeBlock',
         content: capture[2],
       }),
     },
     json: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         }
         return SharedMarkdown.jsonMatch(source);
       },
       parse: (capture: SharedMarkdown.Capture) => {
         const jsonCapture: SharedMarkdown.JSONCapture = (capture: any);
         return {
           type: 'codeBlock',
           content: SharedMarkdown.jsonPrint(jsonCapture),
         };
       },
     },
     list: {
       ...SimpleMarkdown.defaultRules.list,
       match: SharedMarkdown.matchList,
       parse: SharedMarkdown.parseList,
       react(
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) {
         const children = node.items.map((item, i) => {
           const content = output(item, state);
           const bulletValue = node.ordered ? node.start + i + '. ' : '\u2022 ';
           return (
             <View key={i} style={styles.listRow}>
               <Text style={[state.textStyle, styles.listBulletStyle]}>
                 {bulletValue}
               </Text>
               <View style={styles.insideListView}>{content}</View>
             </View>
           );
         });
 
         return <View key={state.key}>{children}</View>;
       },
     },
     escape: SimpleMarkdown.defaultRules.escape,
   };
   return {
     ...inlineRules,
     simpleMarkdownRules,
     emojiOnlyFactor: 2,
     container: 'View',
   };
 });
 
 function useTextMessageRulesFunc(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   chatMentionCandidates: ChatMentionCandidates,
 ): (useDarkStyle: boolean) => MarkdownRules {
   const { members } = threadInfo;
   return React.useMemo(
     () =>
       _memoize<[boolean], MarkdownRules>((useDarkStyle: boolean) =>
         textMessageRules(members, chatMentionCandidates, useDarkStyle),
       ),
     [members, chatMentionCandidates],
   );
 }
 
 function textMessageRules(
-  members: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  members: $ReadOnlyArray<RelativeMemberInfo>,
   chatMentionCandidates: ChatMentionCandidates,
   useDarkStyle: boolean,
 ): MarkdownRules {
   const baseRules = fullMarkdownRules(useDarkStyle);
   const membersMap = SharedMarkdown.createMemberMapForUserMentions(members);
 
   return {
     ...baseRules,
     simpleMarkdownRules: {
       ...baseRules.simpleMarkdownRules,
       userMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SharedMarkdown.matchUserMentions(membersMap),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseUserMentions(membersMap, capture),
         // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownUserMention
             key={state.key}
             userID={node.userID}
             useDarkStyle={useDarkStyle}
           >
             {node.content}
           </MarkdownUserMention>
         ),
       },
       chatMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SimpleMarkdown.inlineRegex(chatMentionRegex),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseChatMention(chatMentionCandidates, capture),
         // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) =>
           node.hasAccessToChat ? (
             <MarkdownChatMention key={state.key} threadInfo={node.threadInfo}>
               {node.content}
             </MarkdownChatMention>
           ) : (
             <Text key={state.key}>{node.content}</Text>
           ),
       },
     },
   };
 }
 
 let defaultTextMessageRules = null;
 
 function getDefaultTextMessageRules(
   overrideDefaultChatMentionCandidates: ChatMentionCandidates = {},
 ): MarkdownRules {
   if (Object.keys(overrideDefaultChatMentionCandidates).length > 0) {
     return textMessageRules([], overrideDefaultChatMentionCandidates, false);
   }
   if (!defaultTextMessageRules) {
     defaultTextMessageRules = textMessageRules([], {}, false);
   }
   return defaultTextMessageRules;
 }
 
 export {
   inlineMarkdownRules,
   useTextMessageRulesFunc,
   getDefaultTextMessageRules,
 };
diff --git a/native/roles/change-roles-screen.react.js b/native/roles/change-roles-screen.react.js
index fb9581d5b..e65a64e14 100644
--- a/native/roles/change-roles-screen.react.js
+++ b/native/roles/change-roles-screen.react.js
@@ -1,310 +1,304 @@
 // @flow
 
 import { useActionSheet } from '@expo/react-native-action-sheet';
 import invariant from 'invariant';
 import * as React from 'react';
 import { View, Text, Platform, ActivityIndicator } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { changeThreadMemberRolesActionTypes } from 'lib/actions/thread-actions.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
-  ThreadInfo,
-} from 'lib/types/thread-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js';
 import { values } from 'lib/utils/objects.js';
 
 import ChangeRolesHeaderRightButton from './change-roles-header-right-button.react.js';
 import UserAvatar from '../avatars/user-avatar.react.js';
 import type { ChatNavigationProp } from '../chat/chat.react';
 import SWMansionIcon from '../components/swmansion-icon.react.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStyles } from '../themes/colors.js';
 
 export type ChangeRolesScreenParams = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
-  +memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +memberInfo: RelativeMemberInfo,
   +role: ?string,
 };
 
 type Props = {
   +navigation: ChatNavigationProp<'ChangeRolesScreen'>,
   +route: NavigationRoute<'ChangeRolesScreen'>,
 };
 
 const changeRolesLoadingStatusSelector = createLoadingStatusSelector(
   changeThreadMemberRolesActionTypes,
 );
 
 function ChangeRolesScreen(props: Props): React.Node {
   const { navigation, route } = props;
   const { threadInfo, memberInfo, role } = props.route.params;
   invariant(role, 'Role must be defined');
 
   const changeRolesLoadingStatus: LoadingStatus = useSelector(
     changeRolesLoadingStatusSelector,
   );
 
   const styles = useStyles(unboundStyles);
 
   const [selectedRole, setSelectedRole] = React.useState<string>(role);
   const roleOptions = React.useMemo(
     () =>
       values(threadInfo.roles).map(threadRole => ({
         id: threadRole.id,
         name: threadRole.name,
       })),
     [threadInfo.roles],
   );
   const selectedRoleName = React.useMemo(
     () => roleOptions.find(roleOption => roleOption.id === selectedRole)?.name,
     [roleOptions, selectedRole],
   );
 
   const onRoleChange = React.useCallback(
     (selectedIndex: ?number) => {
       if (
         selectedIndex === undefined ||
         selectedIndex === null ||
         selectedIndex === roleOptions.length
       ) {
         return;
       }
 
       const newRole = roleOptions[selectedIndex].id;
 
       setSelectedRole(newRole);
       navigation.setParams({
         threadInfo,
         memberInfo,
         role: newRole,
       });
     },
     [navigation, setSelectedRole, roleOptions, memberInfo, threadInfo],
   );
 
   const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
   const { showActionSheetWithOptions } = useActionSheet();
   const insets = useSafeAreaInsets();
 
   const showActionSheet = React.useCallback(() => {
     const options =
       Platform.OS === 'ios'
         ? [...roleOptions.map(roleOption => roleOption.name), 'Cancel']
         : [...roleOptions.map(roleOption => roleOption.name)];
 
     const cancelButtonIndex = Platform.OS === 'ios' ? options.length - 1 : -1;
 
     const containerStyle = {
       paddingBottom: insets.bottom,
     };
 
     showActionSheetWithOptions(
       {
         options,
         cancelButtonIndex,
         containerStyle,
         userInterfaceStyle: activeTheme ?? 'dark',
       },
       onRoleChange,
     );
   }, [
     roleOptions,
     onRoleChange,
     insets.bottom,
     activeTheme,
     showActionSheetWithOptions,
   ]);
 
   const otherUsersButNoOtherAdminsValue = useSelector(
     otherUsersButNoOtherAdmins(threadInfo.id),
   );
 
   const memberIsAdmin = React.useMemo(() => {
     invariant(memberInfo.role, 'Expected member role to be defined');
     return roleIsAdminRole(threadInfo.roles[memberInfo.role]);
   }, [threadInfo.roles, memberInfo.role]);
 
   const shouldRoleChangeBeDisabled = React.useMemo(
     () => otherUsersButNoOtherAdminsValue && memberIsAdmin,
     [otherUsersButNoOtherAdminsValue, memberIsAdmin],
   );
 
   const roleSelector = React.useMemo(() => {
     if (shouldRoleChangeBeDisabled) {
       return (
         <View style={styles.roleSelector}>
           <Text style={styles.disabledCurrentRole}>{selectedRoleName}</Text>
           <SWMansionIcon
             name="edit-1"
             size={20}
             style={styles.disabledPencilIcon}
           />
         </View>
       );
     }
 
     return (
       <TouchableOpacity onPress={showActionSheet} style={styles.roleSelector}>
         <Text style={styles.currentRole}>{selectedRoleName}</Text>
         <SWMansionIcon name="edit-1" size={20} style={styles.pencilIcon} />
       </TouchableOpacity>
     );
   }, [showActionSheet, styles, selectedRoleName, shouldRoleChangeBeDisabled]);
 
   const disabledRoleChangeMessage = React.useMemo(() => {
     if (!shouldRoleChangeBeDisabled) {
       return null;
     }
 
     return (
       <View style={styles.disabledWarningBackground}>
         <SWMansionIcon name="info-circle" size={24} style={styles.infoIcon} />
         <Text style={styles.disabledWarningText}>
           There must be at least one admin at any given time in a community.
         </Text>
       </View>
     );
   }, [
     shouldRoleChangeBeDisabled,
     styles.disabledWarningBackground,
     styles.infoIcon,
     styles.disabledWarningText,
   ]);
 
   React.useEffect(() => {
     navigation.setOptions({
       // eslint-disable-next-line react/display-name
       headerRight: () => {
         if (changeRolesLoadingStatus === 'loading') {
           return (
             <ActivityIndicator
               size="small"
               color="white"
               style={styles.activityIndicator}
             />
           );
         }
         return (
           <ChangeRolesHeaderRightButton
             route={route}
             shouldRoleChangeBeDisabled={shouldRoleChangeBeDisabled}
           />
         );
       },
     });
   }, [
     changeRolesLoadingStatus,
     navigation,
     styles.activityIndicator,
     route,
     shouldRoleChangeBeDisabled,
   ]);
 
   return (
     <View>
       <View style={styles.descriptionBackground}>
         <Text style={styles.descriptionText}>
           Members can only be assigned one role at a time. Changing a
           member&rsquo;s role will replace their previously assigned role.
         </Text>
       </View>
       <View style={styles.memberInfo}>
         <UserAvatar userID={memberInfo.id} size="XL" />
         <Text style={styles.memberInfoUsername}>{memberInfo.username}</Text>
       </View>
       {roleSelector}
       {disabledRoleChangeMessage}
     </View>
   );
 }
 
 const unboundStyles = {
   descriptionBackground: {
     backgroundColor: 'panelForeground',
     marginBottom: 20,
   },
   descriptionText: {
     color: 'panelBackgroundLabel',
     padding: 16,
     fontSize: 14,
   },
   memberInfo: {
     backgroundColor: 'panelForeground',
     padding: 16,
     marginBottom: 30,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',
   },
   memberInfoUsername: {
     color: 'panelForegroundLabel',
     marginTop: 8,
     fontSize: 18,
     fontWeight: '500',
   },
   roleSelectorLabel: {
     color: 'panelForegroundSecondaryLabel',
     marginLeft: 8,
     fontSize: 12,
   },
   roleSelector: {
     backgroundColor: 'panelForeground',
     marginTop: 8,
     padding: 16,
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'space-between',
   },
   currentRole: {
     color: 'panelForegroundSecondaryLabel',
     fontSize: 16,
   },
   disabledCurrentRole: {
     color: 'disabledButton',
     fontSize: 16,
   },
   pencilIcon: {
     color: 'panelInputSecondaryForeground',
   },
   disabledPencilIcon: {
     color: 'disabledButton',
   },
   disabledWarningBackground: {
     backgroundColor: 'disabledButton',
     padding: 16,
     display: 'flex',
     marginTop: 20,
     flexDirection: 'row',
     justifyContent: 'center',
     width: '75%',
     alignSelf: 'center',
   },
   disabledWarningText: {
     color: 'panelForegroundSecondaryLabel',
     fontSize: 14,
     marginRight: 8,
     display: 'flex',
   },
   infoIcon: {
     color: 'panelForegroundSecondaryLabel',
     marginRight: 8,
     marginLeft: 8,
     marginBottom: 12,
   },
   activityIndicator: {
     paddingRight: 15,
   },
 };
 
 export default ChangeRolesScreen;
diff --git a/web/input/input-state.js b/web/input/input-state.js
index b91218a77..2861ef751 100644
--- a/web/input/input-state.js
+++ b/web/input/input-state.js
@@ -1,113 +1,108 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   type MediaType,
   type EncryptedMediaType,
   type Dimensions,
   type MediaMissionStep,
 } from 'lib/types/media-types.js';
 import type { RawTextMessageInfo } from 'lib/types/messages/text.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
   ThreadInfo,
-  LegacyRelativeMemberInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 
 export type PendingMultimediaUpload = {
   +localID: string,
   // Pending uploads are assigned a serverID once they are complete
   +serverID: ?string,
   // Pending uploads are assigned a messageID once they are sent
   +messageID: ?string,
   // This is set to true if the upload fails for whatever reason
   +failed: boolean,
   +file: File,
   +mediaType: MediaType | EncryptedMediaType,
   +dimensions: ?Dimensions,
   +uri: string,
   +blobHolder: ?string,
   +blobHash: ?string,
   +encryptionKey: ?string,
   +thumbHash: ?string,
   +loop: boolean,
   // URLs created with createObjectURL aren't considered "real". The distinction
   // is required because those "fake" URLs must be disposed properly
   +uriIsReal: boolean,
   +progressPercent: number,
   // This is set once the network request begins and used if the upload is
   // cancelled
   +abort: ?() => void,
   +steps: MediaMissionStep[],
   +selectTime: number,
   +shouldEncrypt: boolean,
 };
 
 export type TypeaheadState = {
   +canBeVisible: boolean,
   +keepUpdatingThreadMembers: boolean,
-  +frozenUserMentionsCandidates: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  +frozenUserMentionsCandidates: $ReadOnlyArray<RelativeMemberInfo>,
   +frozenChatMentionsCandidates: ChatMentionCandidates,
   +moveChoiceUp: ?() => void,
   +moveChoiceDown: ?() => void,
   +close: ?() => void,
   +accept: ?() => void,
 };
 
 export type BaseInputState = {
   +pendingUploads: $ReadOnlyArray<PendingMultimediaUpload>,
   +assignedUploads: {
     [messageID: string]: $ReadOnlyArray<PendingMultimediaUpload>,
   },
   +draft: string,
   +textCursorPosition: number,
   +appendFiles: (
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     files: $ReadOnlyArray<File>,
   ) => Promise<boolean>,
   +cancelPendingUpload: (localUploadID: string) => void,
   +sendTextMessage: (
     messageInfo: RawTextMessageInfo,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
     parentThreadInfo: ?ThreadInfo | ?MinimallyEncodedThreadInfo,
   ) => Promise<void>,
   +createMultimediaMessage: (
     localID: number,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => void,
   +setDraft: (draft: string) => void,
   +setTextCursorPosition: (newPosition: number) => void,
   +messageHasUploadFailure: (localMessageID: string) => boolean,
   +retryMultimediaMessage: (
     localMessageID: string,
     threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   ) => void,
   +addReply: (text: string) => void,
   +addReplyListener: ((message: string) => void) => void,
   +removeReplyListener: ((message: string) => void) => void,
   +registerSendCallback: (() => mixed) => void,
   +unregisterSendCallback: (() => mixed) => void,
 };
 
 export type TypeaheadInputState = {
   +typeaheadState: TypeaheadState,
   +setTypeaheadState: (Partial<TypeaheadState>) => void,
 };
 
 // This type represents the input state for a particular thread
 export type InputState = {
   ...BaseInputState,
   ...TypeaheadInputState,
 };
 
 const InputStateContext: React.Context<?InputState> =
   React.createContext<?InputState>(null);
 
 export { InputStateContext };
diff --git a/web/markdown/rules.react.js b/web/markdown/rules.react.js
index cd0b52e78..6147909d0 100644
--- a/web/markdown/rules.react.js
+++ b/web/markdown/rules.react.js
@@ -1,254 +1,249 @@
 // @flow
 
 import _memoize from 'lodash/memoize.js';
 import * as React from 'react';
 import * as SimpleMarkdown from 'simple-markdown';
 
 import * as SharedMarkdown from 'lib/shared/markdown.js';
 import { chatMentionRegex } from 'lib/shared/mention-utils.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
   ThreadInfo,
   ChatMentionCandidates,
+  RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 
 import MarkdownChatMention from './markdown-chat-mention.react.js';
 import MarkdownSpoiler from './markdown-spoiler.react.js';
 import MarkdownUserMention from './markdown-user-mention.react.js';
 
 export type MarkdownRules = {
   +simpleMarkdownRules: SharedMarkdown.ParserRules,
   +useDarkStyle: boolean,
 };
 
 const linkRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const simpleMarkdownRules = {
     // We are using default simple-markdown rules
     // For more details, look at native/markdown/rules.react
     link: {
       ...SimpleMarkdown.defaultRules.link,
       match: () => null,
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <a
           href={SimpleMarkdown.sanitizeUrl(node.target)}
           key={state.key}
           title={node.title}
           target="_blank"
           rel="noopener noreferrer"
         >
           {output(node.content, state)}
         </a>
       ),
     },
     paragraph: {
       ...SimpleMarkdown.defaultRules.paragraph,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.paragraphRegex),
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <React.Fragment key={state.key}>
           {output(node.content, state)}
         </React.Fragment>
       ),
     },
     text: SimpleMarkdown.defaultRules.text,
     url: {
       ...SimpleMarkdown.defaultRules.url,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.urlRegex),
     },
   };
   return {
     simpleMarkdownRules: simpleMarkdownRules,
     useDarkStyle,
   };
 });
 
 const markdownRules: boolean => MarkdownRules = _memoize(useDarkStyle => {
   const linkMarkdownRules = linkRules(useDarkStyle);
 
   const simpleMarkdownRules = {
     ...linkMarkdownRules.simpleMarkdownRules,
     autolink: SimpleMarkdown.defaultRules.autolink,
     link: {
       ...linkMarkdownRules.simpleMarkdownRules.link,
       match: SimpleMarkdown.defaultRules.link.match,
     },
     blockQuote: {
       ...SimpleMarkdown.defaultRules.blockQuote,
       // match end of blockQuote by either \n\n or end of string
       match: SharedMarkdown.matchBlockQuote(SharedMarkdown.blockQuoteRegex),
       parse: SharedMarkdown.parseBlockQuote,
     },
     spoiler: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: SimpleMarkdown.inlineRegex(SharedMarkdown.spoilerRegex),
       parse(
         capture: SharedMarkdown.Capture,
         parse: SharedMarkdown.Parser,
         state: SharedMarkdown.State,
       ) {
         const content = capture[1];
         return {
           content: SimpleMarkdown.parseInline(parse, content, state),
         };
       },
       // eslint-disable-next-line react/display-name
       react: (
         node: SharedMarkdown.SingleASTNode,
         output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
         state: SharedMarkdown.State,
       ) => (
         <MarkdownSpoiler key={state.key} text={output(node.content, state)} />
       ),
     },
     inlineCode: SimpleMarkdown.defaultRules.inlineCode,
     em: SimpleMarkdown.defaultRules.em,
     strong: SimpleMarkdown.defaultRules.strong,
     del: SimpleMarkdown.defaultRules.del,
     u: SimpleMarkdown.defaultRules.u,
     heading: {
       ...SimpleMarkdown.defaultRules.heading,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.headingRegex),
     },
     mailto: SimpleMarkdown.defaultRules.mailto,
     codeBlock: {
       ...SimpleMarkdown.defaultRules.codeBlock,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.codeBlockRegex),
       parse: (capture: SharedMarkdown.Capture) => ({
         content: capture[0].replace(/^ {4}/gm, ''),
       }),
     },
     fence: {
       ...SimpleMarkdown.defaultRules.fence,
       match: SimpleMarkdown.blockRegex(SharedMarkdown.fenceRegex),
       parse: (capture: SharedMarkdown.Capture) => ({
         type: 'codeBlock',
         content: capture[2],
       }),
     },
     json: {
       order: SimpleMarkdown.defaultRules.paragraph.order - 1,
       match: (source: string, state: SharedMarkdown.State) => {
         if (state.inline) {
           return null;
         }
         return SharedMarkdown.jsonMatch(source);
       },
       parse: (capture: SharedMarkdown.Capture) => {
         const jsonCapture: SharedMarkdown.JSONCapture = (capture: any);
         return {
           type: 'codeBlock',
           content: SharedMarkdown.jsonPrint(jsonCapture),
         };
       },
     },
     list: {
       ...SimpleMarkdown.defaultRules.list,
       match: SharedMarkdown.matchList,
       parse: SharedMarkdown.parseList,
     },
     escape: SimpleMarkdown.defaultRules.escape,
   };
   return {
     ...linkMarkdownRules,
     simpleMarkdownRules,
     useDarkStyle,
   };
 });
 
 function useTextMessageRulesFunc(
   threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   chatMentionCandidates: ChatMentionCandidates,
 ): boolean => MarkdownRules {
   const { members } = threadInfo;
   return React.useMemo(
     () =>
       _memoize<[boolean], MarkdownRules>((useDarkStyle: boolean) =>
         textMessageRules(members, chatMentionCandidates, useDarkStyle),
       ),
     [chatMentionCandidates, members],
   );
 }
 
 function textMessageRules(
-  members: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  members: $ReadOnlyArray<RelativeMemberInfo>,
   chatMentionCandidates: ChatMentionCandidates,
   useDarkStyle: boolean,
 ): MarkdownRules {
   const baseRules = markdownRules(useDarkStyle);
   const membersMap = SharedMarkdown.createMemberMapForUserMentions(members);
 
   return {
     ...baseRules,
     simpleMarkdownRules: {
       ...baseRules.simpleMarkdownRules,
       userMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SharedMarkdown.matchUserMentions(membersMap),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseUserMentions(membersMap, capture),
         // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownUserMention
             key={state.key}
             text={node.content}
             userID={node.userID}
           />
         ),
       },
       chatMention: {
         ...SimpleMarkdown.defaultRules.strong,
         match: SimpleMarkdown.inlineRegex(chatMentionRegex),
         parse: (capture: SharedMarkdown.Capture) =>
           SharedMarkdown.parseChatMention(chatMentionCandidates, capture),
         // eslint-disable-next-line react/display-name
         react: (
           node: SharedMarkdown.SingleASTNode,
           output: SharedMarkdown.Output<SharedMarkdown.ReactElement>,
           state: SharedMarkdown.State,
         ) => (
           <MarkdownChatMention
             key={state.key}
             threadInfo={node.threadInfo}
             hasAccessToChat={node.hasAccessToChat}
             text={node.content}
           />
         ),
       },
     },
   };
 }
 
 let defaultTextMessageRules = null;
 
 function getDefaultTextMessageRules(
   overrideDefaultChatMentionCandidates: ChatMentionCandidates = {},
 ): MarkdownRules {
   if (Object.keys(overrideDefaultChatMentionCandidates).length > 0) {
     return textMessageRules([], overrideDefaultChatMentionCandidates, false);
   }
   if (!defaultTextMessageRules) {
     defaultTextMessageRules = textMessageRules([], {}, false);
   }
   return defaultTextMessageRules;
 }
 
 export { linkRules, useTextMessageRulesFunc, getDefaultTextMessageRules };
diff --git a/web/modals/threads/create/steps/subchannel-members-list.react.js b/web/modals/threads/create/steps/subchannel-members-list.react.js
index ab4771b99..bc2ed4447 100644
--- a/web/modals/threads/create/steps/subchannel-members-list.react.js
+++ b/web/modals/threads/create/steps/subchannel-members-list.react.js
@@ -1,120 +1,106 @@
 // @flow
 
 import * as React from 'react';
 
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
-  ThreadInfo,
-} from 'lib/types/thread-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js';
 import type { UserListItem } from 'lib/types/user-types.js';
 
 import { useSelector } from '../../../../redux/redux-utils.js';
 import AddMembersList from '../../../components/add-members-list.react.js';
 
 type Props = {
   +searchText: string,
   +searchResult: $ReadOnlySet<string>,
   +communityThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +selectedUsers: $ReadOnlySet<string>,
   +toggleUserSelection: (userID: string) => void,
 };
 
 function SubchannelMembersList(props: Props): React.Node {
   const {
     searchText,
     searchResult,
     communityThreadInfo,
     parentThreadInfo,
     selectedUsers,
     toggleUserSelection,
   } = props;
 
   const { name: communityName } = communityThreadInfo;
 
   const currentUserId = useSelector(state => state.currentUserInfo?.id);
 
   const parentMembersSet = React.useMemo(
     () => new Set(parentThreadInfo.members.map(user => user.id)),
     [parentThreadInfo],
   );
 
   const filterOutParentMembersWithENSNames = React.useCallback(
-    (
-      members: $ReadOnlyArray<
-        LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-      >,
-    ) =>
+    (members: $ReadOnlyArray<RelativeMemberInfo>) =>
       members
         .filter(
           user =>
             user.id !== currentUserId &&
             (searchResult.has(user.id) || searchText.length === 0),
         )
         .map(user => ({ id: user.id, username: stringForUser(user) })),
     [currentUserId, searchResult, searchText.length],
   );
 
   const parentMemberListWithoutENSNames = React.useMemo(
     () => filterOutParentMembersWithENSNames(parentThreadInfo.members),
     [filterOutParentMembersWithENSNames, parentThreadInfo.members],
   );
 
   const parentMemberList = useENSNames<UserListItem>(
     parentMemberListWithoutENSNames,
   );
 
   const filterOutOtherMembersWithENSNames = React.useCallback(
-    (
-      members: $ReadOnlyArray<
-        LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-      >,
-    ) =>
+    (members: $ReadOnlyArray<RelativeMemberInfo>) =>
       members
         .filter(
           user =>
             !parentMembersSet.has(user.id) &&
             user.id !== currentUserId &&
             (searchResult.has(user.id) || searchText.length === 0),
         )
         .map(user => ({ id: user.id, username: stringForUser(user) })),
     [currentUserId, parentMembersSet, searchResult, searchText.length],
   );
 
   const otherMemberListWithoutENSNames = React.useMemo(
     () => filterOutOtherMembersWithENSNames(communityThreadInfo.members),
     [communityThreadInfo.members, filterOutOtherMembersWithENSNames],
   );
 
   const otherMemberList = useENSNames<UserListItem>(
     otherMemberListWithoutENSNames,
   );
 
   const sortedGroupedUserList = React.useMemo(
     () =>
       [
         { header: 'Users in parent channel', userInfos: parentMemberList },
         {
           header: `All users in ${communityName ?? 'community'}`,
           userInfos: otherMemberList,
         },
       ].filter(item => item.userInfos.length),
     [parentMemberList, otherMemberList, communityName],
   );
 
   return (
     <AddMembersList
       switchUser={toggleUserSelection}
       pendingUsersToAdd={selectedUsers}
       sortedGroupedUsersList={sortedGroupedUserList}
     />
   );
 }
 
 export default SubchannelMembersList;
diff --git a/web/modals/threads/members/change-member-role-modal.react.js b/web/modals/threads/members/change-member-role-modal.react.js
index 31e62bbb0..81f2069d1 100644
--- a/web/modals/threads/members/change-member-role-modal.react.js
+++ b/web/modals/threads/members/change-member-role-modal.react.js
@@ -1,160 +1,154 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import {
   useChangeThreadMemberRoles,
   changeThreadMemberRolesActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { otherUsersButNoOtherAdmins } from 'lib/selectors/thread-selectors.js';
 import { roleIsAdminRole } from 'lib/shared/thread-utils.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import type {
-  LegacyRelativeMemberInfo,
-  ThreadInfo,
-} from 'lib/types/thread-types';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { values } from 'lib/utils/objects.js';
 
 import css from './change-member-role-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import Button, { buttonThemes } from '../../../components/button.react.js';
 import Dropdown from '../../../components/dropdown.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import Modal from '../../modal.react.js';
 import UnsavedChangesModal from '../../unsaved-changes-modal.react.js';
 
 type ChangeMemberRoleModalProps = {
-  +memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
 };
 
 function ChangeMemberRoleModal(props: ChangeMemberRoleModalProps): React.Node {
   const { memberInfo, threadInfo } = props;
   const { pushModal, popModal } = useModalContext();
   const dispatchActionPromise = useDispatchActionPromise();
   const callChangeThreadMemberRoles = useChangeThreadMemberRoles();
   const otherUsersButNoOtherAdminsValue = useSelector(
     otherUsersButNoOtherAdmins(threadInfo.id),
   );
 
   const roleOptions = React.useMemo(
     () =>
       values(threadInfo.roles).map(role => ({
         id: role.id,
         name: role.name,
       })),
     [threadInfo.roles],
   );
 
   const initialSelectedRole = memberInfo.role;
   invariant(initialSelectedRole, "Member's role must be defined");
 
   const [selectedRole, setSelectedRole] = React.useState(initialSelectedRole);
 
   const onCloseModal = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     pushModal(<UnsavedChangesModal />);
   }, [initialSelectedRole, popModal, pushModal, selectedRole]);
 
   const disabledRoleChangeMessage = React.useMemo(() => {
     const memberIsAdmin = roleIsAdminRole(
       threadInfo.roles[initialSelectedRole],
     );
 
     if (!otherUsersButNoOtherAdminsValue || !memberIsAdmin) {
       return null;
     }
 
     return (
       <div className={css.roleModalDisabled}>
         <SWMansionIcon icon="info-circle" size={36} className={css.infoIcon} />
         <div className={css.infoText}>
           There must be at least one admin at any given time in a community.
         </div>
       </div>
     );
   }, [initialSelectedRole, otherUsersButNoOtherAdminsValue, threadInfo.roles]);
 
   const onSave = React.useCallback(() => {
     if (selectedRole === initialSelectedRole) {
       popModal();
       return;
     }
 
     const createChangeThreadMemberRolesPromise = () =>
       callChangeThreadMemberRoles({
         threadID: threadInfo.id,
         memberIDs: [memberInfo.id],
         newRole: selectedRole,
       });
 
     dispatchActionPromise(
       changeThreadMemberRolesActionTypes,
       createChangeThreadMemberRolesPromise(),
     );
     popModal();
   }, [
     callChangeThreadMemberRoles,
     dispatchActionPromise,
     initialSelectedRole,
     memberInfo.id,
     popModal,
     selectedRole,
     threadInfo.id,
   ]);
 
   return (
     <Modal name="Change Role" onClose={onCloseModal} size="large">
       <div className={css.roleModalDescription}>
         Members can only be assigned to one role at a time. Changing a
         member&rsquo;s role will replace their previously assigned role.
       </div>
       <div className={css.roleModalMember}>
         <div className={css.roleModalMemberAvatar}>
           <UserAvatar userID={memberInfo.id} size="M" />
         </div>
         <div className={css.roleModalMemberName}>{memberInfo.username}</div>
       </div>
       <div className={css.roleModalRoleSelector}>
         <Dropdown
           options={roleOptions}
           activeSelection={selectedRole}
           setActiveSelection={setSelectedRole}
           disabled={!!disabledRoleChangeMessage}
         />
       </div>
       {disabledRoleChangeMessage}
       <div className={css.roleModalActionButtons}>
         <Button
           variant="outline"
           className={css.roleModalBackButton}
           onClick={onCloseModal}
         >
           Back
         </Button>
         <Button
           variant="filled"
           className={css.roleModalSaveButton}
           buttonColor={buttonThemes.primary}
           onClick={onSave}
           disabled={!!disabledRoleChangeMessage}
         >
           Save
         </Button>
       </div>
     </Modal>
   );
 }
 
 export default ChangeMemberRoleModal;
diff --git a/web/modals/threads/members/member.react.js b/web/modals/threads/members/member.react.js
index 0093d66f8..da8a5240e 100644
--- a/web/modals/threads/members/member.react.js
+++ b/web/modals/threads/members/member.react.js
@@ -1,142 +1,136 @@
 // @flow
 
 import * as React from 'react';
 
 import { useRemoveUsersFromThread } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import {
   removeMemberFromThread,
   getAvailableThreadMemberActions,
 } from 'lib/shared/thread-utils.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
 import type { SetState } from 'lib/types/hook-types.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
-import {
-  type LegacyRelativeMemberInfo,
-  type ThreadInfo,
-} from 'lib/types/thread-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { ThreadInfo, RelativeMemberInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import ChangeMemberRoleModal from './change-member-role-modal.react.js';
 import css from './members-modal.css';
 import UserAvatar from '../../../avatars/user-avatar.react.js';
 import CommIcon from '../../../CommIcon.react.js';
 import Label from '../../../components/label.react.js';
 import MenuItem from '../../../components/menu-item.react.js';
 import Menu from '../../../components/menu.react.js';
 import { usePushUserProfileModal } from '../../user-profile/user-profile-utils.js';
 
 const commIconComponent = <CommIcon size={18} icon="user-edit" />;
 
 type Props = {
-  +memberInfo: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
+  +memberInfo: RelativeMemberInfo,
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
   +setOpenMenu: SetState<?string>,
 };
 
 function ThreadMember(props: Props): React.Node {
   const { memberInfo, threadInfo, setOpenMenu } = props;
   const { pushModal } = useModalContext();
   const userName = stringForUser(memberInfo);
 
   const roles = useRolesFromCommunityThreadInfo(threadInfo, [memberInfo]);
   const roleName = roles.get(memberInfo.id)?.name;
 
   const onMenuChange = React.useCallback(
     (menuOpen: boolean) => {
       if (menuOpen) {
         setOpenMenu(() => memberInfo.id);
       } else {
         setOpenMenu(menu => (menu === memberInfo.id ? null : menu));
       }
     },
     [memberInfo.id, setOpenMenu],
   );
 
   const dispatchActionPromise = useDispatchActionPromise();
   const boundRemoveUsersFromThread = useRemoveUsersFromThread();
 
   const onClickRemoveUser = React.useCallback(
     () =>
       removeMemberFromThread(
         threadInfo,
         memberInfo,
         dispatchActionPromise,
         boundRemoveUsersFromThread,
       ),
     [boundRemoveUsersFromThread, dispatchActionPromise, memberInfo, threadInfo],
   );
 
   const onClickChangeRole = React.useCallback(() => {
     pushModal(
       <ChangeMemberRoleModal memberInfo={memberInfo} threadInfo={threadInfo} />,
     );
   }, [memberInfo, pushModal, threadInfo]);
 
   const menuItems = React.useMemo(
     () =>
       getAvailableThreadMemberActions(memberInfo, threadInfo).map(action => {
         if (action === 'change_role') {
           return (
             <MenuItem
               key="change_role"
               text="Change Role"
               iconComponent={commIconComponent}
               onClick={onClickChangeRole}
             />
           );
         }
         if (action === 'remove_user') {
           return (
             <MenuItem
               key="remove_user"
               text="Remove User"
               icon="logout"
               onClick={onClickRemoveUser}
               dangerous
             />
           );
         }
         return null;
       }),
     [memberInfo, onClickRemoveUser, onClickChangeRole, threadInfo],
   );
 
   const userSettingsIcon = React.useMemo(
     () => <SWMansionIcon icon="edit-1" size={17} />,
     [],
   );
 
   const label = React.useMemo(
     () => <Label variant="grey">{roleName}</Label>,
     [roleName],
   );
 
   const pushUserProfileModal = usePushUserProfileModal(memberInfo.id);
 
   return (
     <div className={css.memberContainer} onClick={pushUserProfileModal}>
       <div className={css.memberInfo}>
         <UserAvatar size="S" userID={memberInfo.id} />
         {userName}
         {label}
       </div>
       <div className={css.memberAction}>
         <Menu
           icon={userSettingsIcon}
           variant="member-actions"
           onChange={onMenuChange}
         >
           {menuItems}
         </Menu>
       </div>
     </div>
   );
 }
 
 export default ThreadMember;
diff --git a/web/modals/threads/members/members-list.react.js b/web/modals/threads/members/members-list.react.js
index 2534510c2..75f62e119 100644
--- a/web/modals/threads/members/members-list.react.js
+++ b/web/modals/threads/members/members-list.react.js
@@ -1,93 +1,82 @@
 // @flow
 
 import classNames from 'classnames';
 import _groupBy from 'lodash/fp/groupBy.js';
 import _toPairs from 'lodash/fp/toPairs.js';
 import * as React from 'react';
 
 import { useENSNames } from 'lib/hooks/ens-cache.js';
 import { stringForUser } from 'lib/shared/user-utils.js';
-import type {
-  MinimallyEncodedRelativeMemberInfo,
-  MinimallyEncodedThreadInfo,
-} from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import type { MinimallyEncodedThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import {
   type ThreadInfo,
-  type LegacyRelativeMemberInfo,
+  type RelativeMemberInfo,
 } from 'lib/types/thread-types.js';
 
 import ThreadMember from './member.react.js';
 import css from './members-modal.css';
 
 type Props = {
   +threadInfo: ThreadInfo | MinimallyEncodedThreadInfo,
-  +threadMembers: $ReadOnlyArray<
-    LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-  >,
+  +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
 };
 
 function ThreadMembersList(props: Props): React.Node {
   const { threadMembers, threadInfo } = props;
   const [openMenu, setOpenMenu] = React.useState<?string>(null);
   const hasMembers = threadMembers.length > 0;
 
   const threadMembersWithENSNames = useENSNames(threadMembers);
 
   const groupedByFirstLetterMembers = React.useMemo(
     () =>
       _groupBy(member => stringForUser(member)[0].toLowerCase())(
         threadMembersWithENSNames,
       ),
     [threadMembersWithENSNames],
   );
 
   const groupedMembersList = React.useMemo(
     () =>
       _toPairs(groupedByFirstLetterMembers)
         .sort((a, b) => a[0].localeCompare(b[0]))
         .map(([letter, users]) => {
           const userList = users
             .sort((a, b) => stringForUser(a).localeCompare(stringForUser(b)))
-            .map(
-              (
-                user:
-                  | LegacyRelativeMemberInfo
-                  | MinimallyEncodedRelativeMemberInfo,
-              ) => (
-                <ThreadMember
-                  key={user.id}
-                  memberInfo={user}
-                  threadInfo={threadInfo}
-                  setOpenMenu={setOpenMenu}
-                />
-              ),
-            );
+            .map((user: RelativeMemberInfo) => (
+              <ThreadMember
+                key={user.id}
+                memberInfo={user}
+                threadInfo={threadInfo}
+                setOpenMenu={setOpenMenu}
+              />
+            ));
           const letterHeader = (
             <h5 className={css.memberletterHeader} key={letter}>
               {letter.toUpperCase()}
             </h5>
           );
           return (
             <React.Fragment key={letter}>
               {letterHeader}
               {userList}
             </React.Fragment>
           );
         }),
     [groupedByFirstLetterMembers, threadInfo],
   );
   let content = groupedMembersList;
   if (!hasMembers) {
     content = (
       <div className={css.noUsers}>
         No matching users were found in the chat!
       </div>
     );
   }
   const membersListClasses = classNames(css.membersList, {
     [css.noScroll]: !!openMenu,
   });
   return <div className={membersListClasses}>{content}</div>;
 }
 
 export default ThreadMembersList;
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
index 4368c5661..597a9c535 100644
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -1,146 +1,142 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
 import { userStoreSearchIndex } from 'lib/selectors/user-selectors.js';
 import {
   roleIsAdminRole,
   threadHasPermission,
 } from 'lib/shared/thread-utils.js';
-import type { MinimallyEncodedRelativeMemberInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
-import { type LegacyRelativeMemberInfo } from 'lib/types/thread-types.js';
+import { type RelativeMemberInfo } from 'lib/types/thread-types.js';
 import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js';
 
 import { AddMembersModal } from './add-members-modal.react.js';
 import ThreadMembersList from './members-list.react.js';
 import css from './members-modal.css';
 import Button from '../../../components/button.react.js';
 import Tabs from '../../../components/tabs.react.js';
 import { useSelector } from '../../../redux/redux-utils.js';
 import SearchModal from '../../search-modal.react.js';
 
 type ContentProps = {
   +searchText: string,
   +threadID: string,
 };
 function ThreadMembersModalContent(props: ContentProps): React.Node {
   const { threadID, searchText } = props;
 
   const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members');
 
   const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
   const { members: threadMembersNotFiltered } = threadInfo;
 
   const userSearchIndex = useSelector(userStoreSearchIndex);
   const userIDs = React.useMemo(
     () => userSearchIndex.getSearchResults(searchText),
     [searchText, userSearchIndex],
   );
 
   const allMembers = React.useMemo(
     () =>
       threadMembersNotFiltered.filter(
-        (
-          member: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-        ) => searchText.length === 0 || userIDs.includes(member.id),
+        (member: RelativeMemberInfo) =>
+          searchText.length === 0 || userIDs.includes(member.id),
       ),
     [searchText.length, threadMembersNotFiltered, userIDs],
   );
 
   const roles = useRolesFromCommunityThreadInfo(threadInfo, allMembers);
   const adminMembers = React.useMemo(
     () =>
-      allMembers.filter(
-        (
-          member: LegacyRelativeMemberInfo | MinimallyEncodedRelativeMemberInfo,
-        ) => roleIsAdminRole(roles.get(member.id)),
+      allMembers.filter((member: RelativeMemberInfo) =>
+        roleIsAdminRole(roles.get(member.id)),
       ),
     [allMembers, roles],
   );
 
   const allUsersTab = React.useMemo(
     () => (
       <Tabs.Item id="All Members" header="All Members">
         <ThreadMembersList threadInfo={threadInfo} threadMembers={allMembers} />
       </Tabs.Item>
     ),
     [allMembers, threadInfo],
   );
 
   const allAdminsTab = React.useMemo(
     () => (
       <Tabs.Item id="Admins" header="Admins">
         <ThreadMembersList
           threadInfo={threadInfo}
           threadMembers={adminMembers}
         />
       </Tabs.Item>
     ),
     [adminMembers, threadInfo],
   );
 
   const { pushModal, popModal } = useModalContext();
 
   const onClickAddMembers = React.useCallback(() => {
     pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
   }, [popModal, pushModal, threadID]);
 
   const canAddMembers = threadHasPermission(
     threadInfo,
     threadPermissions.ADD_MEMBERS,
   );
 
   const addMembersButton = React.useMemo(() => {
     if (!canAddMembers) {
       return null;
     }
     return (
       <div className={css.addNewMembers}>
         <Button variant="filled" onClick={onClickAddMembers}>
           Add members
         </Button>
       </div>
     );
   }, [canAddMembers, onClickAddMembers]);
 
   return (
     <div className={css.modalContentContainer}>
       <div className={css.membersListTabs}>
         <Tabs.Container activeTab={tab} setTab={setTab}>
           {allUsersTab}
           {allAdminsTab}
         </Tabs.Container>
       </div>
       {addMembersButton}
     </div>
   );
 }
 
 type Props = {
   +threadID: string,
   +onClose: () => void,
 };
 function ThreadMembersModal(props: Props): React.Node {
   const { onClose, threadID } = props;
   const renderModalContent = React.useCallback(
     (searchText: string) => (
       <ThreadMembersModalContent threadID={threadID} searchText={searchText} />
     ),
     [threadID],
   );
   return (
     <SearchModal
       name="Members"
       searchPlaceholder="Search members"
       onClose={onClose}
       size="large"
     >
       {renderModalContent}
     </SearchModal>
   );
 }
 
 export default ThreadMembersModal;